Grid & Responsive
Grid Options
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Max container width | None (auto) | 750px | 970px | 1170px |
| Class prefix |
.col-xs-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
| # of columns | 12 | |||
| Max column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | N/A | Yes | ||
| Column ordering | N/A | Yes | ||
Responsive utilities
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
.visible-xs-*
|
Visible | Hidden | Hidden | Hidden |
.visible-sm-*
|
Hidden | Visible | Hidden | Hidden |
.visible-md-*
|
Hidden | Hidden | Visible | Hidden |
.visible-lg-*
|
Hidden | Hidden | Hidden | Visible |
.hidden-xs
|
Hidden | Visible | Visible | Visible |
.hidden-sm
|
Visible | Hidden | Visible | Visible |
.hidden-md
|
Visible | Visible | Hidden | Visible |
.hidden-lg
|
Visible | Visible | Visible | Hidden |