Grid

Grid Options

Docs
xs
<576px
sm
≥576px
md
≥768px
lg
≥992px
xl
≥1200px
xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# of columns 12
Gutter width 24px (12px on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Row Columns

Docs
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Equal Width

Docs
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Setting One Column Width

Docs
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable Width Content

Docs
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

All Breakpoints

Docs
col
col
col
col
col-8
col-4

Stacked to Horizontal

Docs
col-sm-8
col-sm-4
col-sm
col-sm
col-sm

Mix and Match

Docs
.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
© Dashonic.
Crafted with by Pichforest