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 |