Bootstrap's grid system is twelve column system built with flexbox. it is a mobile-first flexbox grid to make layouts.


The grid system has 5 classes:

  1. .col - extra small devices - 
  2. .col-sm - small devices - 
  3. .col-md - medium devices
  4. .col-lg - large devices - 
  5. .col-xl - xlarge devices 


Bootstrap's Three Equal Columns Layout

The following example shows how you can create three equal columns, across all devices and screen width:

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



Bootstrap's Two Equal Columns Layout

The following example shows how you can create twp equal columns, across all devices and screen width:

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


Equal-width multi-row Grid Layout

Create columns of equal width that include multiple rows by inserting a .w-100 when you want the columns to be rented in a new row.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>


Three Unequal Responsive Columns

The following example shows how you can create three unequal columns, across all devices and screen width:

 <div class="row">
       <div class="col-sm-2">.col-sm-2</div>
       <div class="col-sm-7">.col-sm-7</div>
       <div class="col-sm-3">.col-sm-3</div>
 </div>