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
Level 1: col-sm-3
Level 2: col-12 col-sm-6
Level 2: col-12 col-sm-6
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
Stacks
Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
Vertical Stacks (.vstack)
First item
Second item
Third item
Horizontal Stacks (.hstack)
First item
Second item
Third item
Horizontal Stacks (.hstack) with Vertical Rule (.vr)
First item
Second item
Third item