Grid system
Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes.
| Extra small <34em | Small ≥34em | Medium ≥48em | Large ≥62em | Extra large ≥75em | |
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Container width | None (auto) | 34rem | 45rem | 60rem | 72.25rem |
| Class prefix |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
Grid examples
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.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, desktop
.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
Column wrapping
.col-xs-9
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-xs-6
Subsequent columns continue along the new line.
Subsequent columns continue along the new line.
Responsive column resets
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0
Offsetting columns
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Nesting columns
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
Column ordering
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Responsive utilities
| Extra small devices Portrait phones (<34em) | Small devices Landscape phones (≥34em) | Medium devices Tablets (≥48em) | Large devices Desktops (≥62em) | Extra large devices Desktops (≥75em) | |
|---|---|---|---|---|---|
.hidden-xs-down
|
Hidden | Visible | Visible | Visible | Visible |
.hidden-sm-down
|
Hidden | Hidden | Visible | Visible | Visible |
.hidden-md-down
|
Hidden | Hidden | Hidden | Visible | Visible |
.hidden-lg-down
|
Hidden | Hidden | Hidden | Hidden | Visible |
.hidden-xl-down
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-xs-up
|
Hidden | Hidden | Hidden | Hidden | Hidden |
.hidden-sm-up
|
Visible | Hidden | Hidden | Hidden | Hidden |
.hidden-md-up
|
Visible | Visible | Hidden | Hidden | Hidden |
.hidden-lg-up
|
Visible | Visible | Visible | Hidden | Hidden |
.hidden-xl-up
|
Visible | Visible | Visible | Visible | Hidden |