Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to work with column classes managing widths of non-grid elements.

Horizontal alignment

One of two columns

Vertical alignment

One of three columns

Offsetting columns

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns.

.col-md-4

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

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

Ordering

Use .order-* classes for controlling the visual order of your content.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

Auto-layout columns

Utilize breakpoint-specific column classes for equal-width columns across any breakpoint from the smallest up to the largest.

col

col-8

col-4

Column gutters

Gutters exist between columns as horizontal padding. Use the gutter modifier classes g-*, gx-* and gy-* to control the gutter widths.

.col-6

.col-6 .g-4