There are five classes used in Bootstrap Grid System.
- .col- (any device)
- .col-xs (for phones)
- .col-sm (for tablets)
- .col-md (for desktops)
- .col-lg (for larger desktops)
- .col-xl ( for extra large device )
Grid System |
Extra-small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
.col
If we use the .col class in bootstrap it will always create in the column grid.
<div class='container'>
<div class='row text-white'>
<div class='col bg-primary'>.col</div>
<div class='col bg-secondary'>.col</div>
<div class='col bg-primary'>.col</div>
</div>
</div>
.col-sm-
If we use the .col-sm class in bootstrap. then window width size is ≥576px then it converts in the column and if the width is less than <576 then it converts in the row.
<div class='container'>
<div class='row text-white'>
<div class='col-sm bg-primary'>.col</div>
<div class='col-sm bg-secondary'>.col</div>
<div class='col-sm bg-primary'>.col</div>
</div>
</div>
.col-md-
If we use the .col-md class in bootstrap. then window width size is ≥768px then it converts in the column and if the width is less than <768px then it converts in the row.
<div class='container'>
<div class='row text-white'>
<div class='col-md bg-primary'>.col</div>
<div class='col-md bg-secondary'>.col</div>
<div class='col-md bg-primary'>.col</div>
</div>
</div>
.col-lg-
If we use the .col-lg class in bootstrap. then window width size is ≥992px then it converts in the column and if the width is less than <992px then it converts in the row.
<div class='container'>
<div class='row text-white'>
<div class='col-lg bg-primary'>.col</div>
<div class='col-lg bg-secondary'>.col</div>
<div class='col-lg bg-primary'>.col</div>
</div>
</div>
.col-xl-
If we use the .col-xl class in bootstrap. then window width size is ≥1200px then it converts in the column and if the width is less than <1200px then it converts in the row.
<div class='container'>
<div class='row text-white'>
<div class='col-xl bg-primary'>.col</div>
<div class='col-xl bg-secondary'>.col</div>
<div class='col-xl bg-primary'>.col</div>
</div>
</div>
