Grid system
Flexible responsive grid based on flex display property.
Basic
12
11
1
10
2
9
3
8
4
7
5
6
6
| Small mobile
≥ 0px |
Mobile
≥ 376px |
Small Tablet
≥ 716px |
Tablet
≥ 984px |
Desktop
≥ 1200px |
HD Desktop & widescreen
≥ 1600px |
|
|---|---|---|---|---|---|---|
| Class prefix | xxs | xs | sm | md | lg | xl |
| # of columns | 12 | |||||
| Gutter width | 8px | 8px | 16px | 24px | 24px | 24px |
Auto width
Add any number of auto sizing columns to a row. Let the grid figure it out.
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
auto
Offsets
1
2
3
4
5
6
7
8
9
10
11
Alignment
Add classes to align elements to the top, bottom, or center of a row or a column.
TOP (by default)
...MIDDLE
...BOTTOM
...START (by default)
...CENTER
...END
...
You can also change the direction of a row to column by using the class is-direction-column.
COLUMN
COLUMN
...Ordering
Add classes to reorder columns.
A
B
C
D
a
b
c
d
Distribution
Add classes to distribute the contents of a row.
Space arround
Space between
...
...