Grid System
| Bootstrap Grid | Extra small (<576px) | Small (≥576px) | Medium (≥768px) | Large (≥992px) | Extra large (≥1200px) |
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Container width | None (auto) | 34rem | 45rem | 60rem | 72.25rem |
| Class prefix | .col- |
.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
Responsive Utilities
| Class | Extra small devices Portrait phones (<576px) |
Small devices Landscape phones (≥576px) |
Medium devices Tablets (≥768px) |
Large devices Desktops (≥992px) |
Extra large devices Desktops (≥1200px) |
|---|---|---|---|---|---|
.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 |