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

## Auto-layout columns - Equal-width

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

## Auto-layout columns - Setting one column width

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

## Auto-layout columns - Variable width content

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

## Auto-layout columns - Equal-width multi-row

col
col
col
col

## Responsive classes - All breakpoints

col
col
col
col
col-8
col-4

## Responsive classes - Stacked to horizontal

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

## Responsive classes - Mix and match

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

## Responsive classes - Gutters

Custom column padding
Custom column padding

## 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

## Alignment - 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

## Alignment - No gutters

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

## Alignment - 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.

## Alignment - Column breaks

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

## Reordering - Order classes

First, but unordered
Second, but last
Third, but first
First, but last
Second, but unordered
Third, but first

### Reordering - Offsetting columns - Offset classes

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

### Reordering - Offsetting columns - Margin utilities

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto

## Nesting

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