Mark Jhonsan
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 | |||||||||||