Grid

Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers, one for each media query range. You can use it with Sass mixins or our predefined classes.

Auto-layout columns

Equal-width

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

Setting one column width

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

Variable width content

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

Equal-width multi-row

col
col
col
col
Responsive classes

All breakpoints

col
col
col
col
col-8
col-4

Stacked to horizontal

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

Mix and match

.col .col-xl-8
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6 .col-xl-4
.col-6
.col-6
Alignment

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

No gutters

.col-12 .col-md-6 .col-xl-8
.col-6 .col-xl-4

Column wrapping

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

Column resets

.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
.col-md-5 .col-xl-6
.col-md-5 .offset-sm-2 .col-xl-6 .offset-md-0
.col.col-md-6.col-xl-5.col-xl-6
.col-md-6 .col-xl-5 .offset-md-2 .col-xl-6 .offset-lg-0
Reordering

Flex order

Offsetting columns

.col-xl-4
.col-xl-4 .offset-md-4
.col-xl-3 .offset-md-3
.col-xl-3 .offset-md-3
.col-xl-6 .offset-md-3
Nesting
Level 1: .col-md-9
Level 2: .col-8 .col-md-6
Level 2: .col-4 .col-md-6