Grid
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Grid options
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| 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 | ||||
| Column ordering | Yes | ||||
Grid options
Two column
Two column
Two column
Two column
Two column
Two column
Three column
Three column
Three column
Three column
Four column
Four column
Four column
Six column
Six column
Twelve column
Eight column
Four column
Four column
Six column
Two column
Four column
Six column
Two column
One column
One column
One column
One column
One column
One column
One column
One column
One column
One column
One column
One column
Officia nam sed possimus repellat et, assumenda corporis velit.