Layout Grid
Normal Grids
A normal grid. ()
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12
Normal Grids, No-gutters
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12
Normal Grids, Gapped
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12
Responsive Grids
A normal grid with the different number of grids on the different devices. Full documentation. ()
Grid options
|
Extra small <540px |
Small ≥540px |
Medium ≥720px |
Large ≥960px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 1rem for screens < 720px (0.5rem on each side of a column), 2rem for screens ≥ 720px (1rem on each side of a column) | ||||
col-6 col-sm-5 col-md-4 col-lg-3
col-6 col-sm-7 col-md-8 col-lg-9
col
col
col-12 col-md-6
col-12 col-md-6
col
col-6
col
col
col-md-auto
col col-lg-2
col-6
col-6
col-sm
col-sm
col-sm
Containers
large container
medium container
small container
tiny container