Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

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

Vertical alignment (align-items-start)

Use align-items-start class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4

Vertical alignment (align-items-center)

Use align-items-center class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4

Vertical alignment (align-items-end)

Use align-items-end class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4

Align Self

Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end

Horizontal Alignment

Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end
© Dosix.
Design & Develop by Themesbrand