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:
- .col - extra small devices -
- .col-sm - small devices -
- .col-md - medium devices
- .col-lg - large devices -
- .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>