Grid Layout System

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

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

Responsive classes - All breakpoints

col

col-8

col-4

Responsive classes - Stacked to horizontal

col-sm-8

col-sm-4

col-sm

Responsive classes - Mix and match

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Responsive classes - Gutters

Custom column padding

Alignment - Vertical alignment

One of three columns

Alignment - Horizontal alignment

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