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
...
...