Stacked-to-horizontal
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Mobile and desktop
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Mobile, tablet, desktops
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Offsetting columns
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
Column ordering
.col-md-9 .push-md-3
.col-md-3 .pull-md-9
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| Extra small devices Phones (<33.9em) | Small devices Tablets (≥34em) | Medium devices Desktops (≥48em) | Large devices Desktops (≥62em) | Extra large devices Desktops (≥75em) | |
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Container width | 34rem | 45rem | 60rem | 72.25rem | 72.25rem |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 1.875rem | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||