Grid

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

Grid Example

Use flexbox alignment utilities to vertically and horizontally align columns

col-lg-12
col-lg-11
col-lg-1
col-lg-10
col-lg-2
col-lg-9
col-lg-3
col-lg-8
col-lg-4
col-lg-7
col-lg-5
col-lg-6
col-lg-6
col-lg-5
col-lg-7
col-lg-4
col-lg-8
col-lg-3
col-lg-9
col-lg-2
col-lg-10
col-lg-1
col-lg-11
col-lg-2
col-lg-3
col-lg-4
col-lg-2
col-lg-1

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns

Vertical alignment (align-items-start)
col-sm-4
col-sm-4
col-sm-4
Align Items Center
col-sm-4
col-sm-4
col-sm-4
Align Items End
col-sm-4
col-sm-4
col-sm-4
Align Self
align-self-start
align-self-center
align-self-end
Horizontal Alignment
justify-content-start
justify-content-center
justify-content-end

Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

Vertical Stacks (.vstack)
First item
Second item
Third item
Horizontal Stacks (.hstack)
First item
Second item
Third item
Horizontal Stacks (.hstack) with Vertical Rule (.vr)
First item
Second item
Third item
© Symox.
Crafted with by Themesbrand