The Bootstrap grid system has four classes:
xs
(for phones - screens less than 768px wide)sm
(for tablets - screens equal to or greater than 768px wide)md
(for small laptops - screens equal to or greater than 992px wide)lg
(for laptops and desktops - screens equal to or greater than 1200px wide)The classes above can be combined to create more dynamic and flexible layouts.
Some Bootstrap grid system rules:
.container
(fixed-width) or .container-fluid
(full-width) for proper alignment and padding.row
and .col-sm-4
are available for quickly making grid layouts.rows
.col-sm-4
The following is a basic structure of a Bootstrap grid:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
So, to create the layout you want, create a container (<div
class="container">
). Next, create a row (<div
class="row">
). Then, add the desired number of columns (tags with appropriate
.col-*-*
classes). Note that numbers in .col-*-*
should always add up to 12 for each row.