Grid system
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 20px (10px on each side of a column) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
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.
Max-Auto (Offset)
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 .mr-auto to force sibling columns away from one another.
Nested Grid
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.
Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).