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
Container max-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 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

Sm Grid-Example

Columns collapse at 576px

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3

Md Grid-Example

Columns collapse at 768px

.col-md-3
.col-md-6
.col-md-3

Lg Grid-Example

Columns collapse at 992px

.col-lg-6
.col-lg-6

Xl Grid-Example

Columns collapse at 1200px

.col-xl-4
.col-xl-4
.col-xl-4

XXl Grid-Example

Columns collapse at 1400px

.col-xxl-6
.col-xxl-6

Grid-Example

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-2
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-12

Offset (Max-Auto)

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns. With the move to flexbox in v4, you can use margin utilities like .me-auto to force sibling columns away from one another.

.col-sm-8 offset-sm-2
.col-sm-3 ms-auto
.col-sm-3 ms-auto
.col-sm-3
.col-sm-3 offset-sm-3
© Dastone Crafted with by Mannatthemes