Grid

Auto-Layout Columns

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.

Equal-width

1 of 2

1 of 3

Variable width content

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 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

Equal-width multi-row

col

Responsive Classes

All breakpoints

col

col-8

col-4

Stacked to horizontal

col-sm-8

col-sm-4

col-sm

Mix and match

.col .col-lg-8

.col-6 .col-lg-4

.col-6

Alignment

Vertical alignment

One of three columns

Horizontal alignment

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

Offsetting columns

.col-lg-4

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

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

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

Nesting

Offsetting columns

Level 1: .col-sm-9

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

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

New order

Event started

Settings

Task

Olivia Wilde

Jordan King

Amelia Wilson

James Smith