Bootstrap 5 Grid system Equal-width

Bootstrap 5 Grid system is a powerful mobile-first responsive flexbox grid that allows up to 12 columns across the page. You can also group the columns together.

The equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid's width. 

Grid system Equal-width used Classes: 

• .row:  This class is used to create the row grid and used in the parent class to create an equal-width grid system.
• .col: This class is used to create a grid/column and this class is used inside of the .row class.

Note: you can also use another class of bootstrap like border class for creating a border of the grid and text color classes.

Syntax: 

 <div class="row">
 <div class="col">
 ...
 </div>
 ...
 </div>

Example 1: In this example, we will use .row and .col classes to create two grids of equal width.

Output:

👁 Image

Example 2: In this example, we will use .row and .col classes to create different grids of different equal widths.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/4.0/layout/grid/#equal-width