Grid options

	Extra small <576px	Small â¥576px	Medium â¥768px	Large â¥992px	Extra large â¥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

three equal-width columns on small, medium, large, and extra large devices

One of three columns

Auto-layout columns

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Column

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

All breakpoints

col

col-8

col-4

Stacked to horizontal

col-sm-8

col-sm-4

col-sm

Mix and match

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

Gutters

Custom column padding

Vertical alignment

One of three columns

Horizontal alignment

One of two columns

No gutters

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

.col-6 .col-md-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 breaks

.col-6 .col-sm-3

Offsetting columns

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

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

Nesting

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First, but last

Second, but unordered

Third, but first

Margin utilities

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto