Grid
Grid Options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | col- |
col-sm- |
col-md- |
col-lg- |
col-xl- |
col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 24px (12px on each side of a column) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
Vertical alignment (align-items-start)
Use align-items-start class to vertically align-items at the start.
col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Vertical alignment (align-items-center)
Use align-items-center class to vertically align-items at the center.
col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Vertical alignment (align-items-end)
Use align-items-end class to vertically align-items at the end.
col-sm-4
col-sm-4
col-sm-4
HTML Preview
<!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
Align Self
Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.
align-self-start
align-self-center
align-self-end
HTML Preview
<!-- Align Self -->
<div class="row">
<div class="col-sm-4 align-self-start">
...
</div>
<div class="col-sm-4 align-self-center">
...
</div>
<div class="col-sm-4 align-self-end">
...
</div>
</div>Horizontal Alignment
Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.
justify-content-start
justify-content-center
justify-content-end
HTML Preview
<!-- Horizontal Alignment --> <div class="row justify-content-start"> <div class="col-sm-4"> ... </div> </div><div class="row justify-content-center"> <div class="col-sm-4"> ... </div> </div><div class="row justify-content-end"> <div class="col-sm-4"> ... </div> </div>