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 | |||||
Grid Example
Use flexbox alignment utilities to vertically and horizontally align columns
col-lg-12
col-lg-11
col-lg-1
col-lg-10
col-lg-2
col-lg-9
col-lg-3
col-lg-8
col-lg-4
col-lg-7
col-lg-5
col-lg-6
col-lg-6
col-lg-5
col-lg-7
col-lg-4
col-lg-8
col-lg-3
col-lg-9
col-lg-2
col-lg-10
col-lg-1
col-lg-11
col-lg-2
col-lg-3
col-lg-4
col-lg-2
col-lg-1
Alignment
Use flexbox alignment utilities to vertically and horizontally align columns
Vertical alignment (align-items-start)
col-sm-4
col-sm-4
col-sm-4
Align Items Center
col-sm-4
col-sm-4
col-sm-4
Align Items End
col-sm-4
col-sm-4
col-sm-4
Align Self
align-self-start
align-self-center
align-self-end
Horizontal Alignment
justify-content-start
justify-content-center
justify-content-end