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 | ||||
Sm Grid-Example
Columns collapse at 576px
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
Md Grid-Example
Columns collapse at 768px
.col-md-3
.col-md-3
.col-md-3
.col-md-3
Lg Grid-Example
Columns collapse at 992
.col-lg-3
.col-lg-3
.col-lg-3
.col-lg-3
Xl Grid-Example
Columns collapse at 1200
.col-xl-3
.col-xl-3
.col-xl-3
.col-xl-3
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.
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-12
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-4moves .col-md-4over four columns. With the move to flexbox in v4, you can use margin utilities like .mr-autoto force sibling columns away from one another.
.col-sm-8 offset-sm-2
.col-sm-3 ml-auto
.col-sm-3 ml-auto
.col-sm-3
.col-sm-3 offset-sm-3