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-lg-8
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-4
.col-6 .col-lg-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-sm-6 .col-lg-8
.col-6 .col-lg-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-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-sm-5 .col-lg-6
.col-sm-5 .offset-sm-2 .col-lg-6 .offset-md-0
.col.col-sm-6.col-lg-5.col-xl-6
.col-sm-6 .col-lg-5 .offset-md-2 .col-xl-6 .offset-lg-0

Reordering

Flex order

Offsetting columns

.col-lg-4
.col-lg-4 .offset-md-4
.col-lg-3 .offset-md-3
.col-lg-3 .offset-md-3
.col-lg-6 .offset-md-3

Push and pull

.col-lg-9 .push-md-3
.col-lg-3 .pull-md-9

Nesting

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6