Mark Jhonson
Grid Layouts
Grid Options
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | |
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes |
Grid Example
| col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 | col-lg-1 |
| col-lg-4 | col-lg-4 | col-lg-4 | |||||||||
| col-lg-4 | col-lg-8 | ||||||||||
| col-lg-6 | col-lg-6 | ||||||||||
| col-lg-12 | |||||||||||