Grids
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 |
|
|---|---|---|---|---|---|---|
Container max-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 | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Sm Grid-Example
Columns collapse at 576px
Md Grid-Example
Columns collapse at 768px
Lg Grid-Example
Columns collapse at 992px
Xl Grid-Example
Columns collapse at 1200px
XXl Grid-Example
Columns collapse at 1400px
Grid-Example
Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.
Offset (Max-Auto)
Move columns to the right using .offset-md-* classes.
These classes increase the left margin of a column by * columns.
For example, .offset-md-4 moves .col-md-4 over four columns.
With the move to flexbox in v4, you can use margin utilities like .me-auto
to force sibling columns away from one another.