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

<div class="row justify-content-start">
  <div class="col-4"><span>One of two columns</span></div>
  <div class="col-4"><span>One of two columns</span></div>
</div>
<div class="row justify-content-center mt-2">
  <div class="col-4"><span>One of two columns</span></div>
  <div class="col-4"><span>One of two columns</span></div>
</div>
<div class="row justify-content-end mt-2">
  <div class="col-4"><span>One of two columns</span></div>
  <div class="col-4"><span>One of two columns</span></div>
</div>

Vertical alignment

One of three columns

<div class="row align-items-start">
  <div class="col"><span>One of three columns</span></div>
  <div class="col"><span>One of three columns</span></div>
  <div class="col"><span>One of three columns</span></div>
</div>
<div class="row align-items-center mt-2">
  <div class="col"><span>One of three columns</span></div>
  <div class="col"><span>One of three columns</span></div>
  <div class="col"><span>One of three columns</span></div>
</div>

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

<div class="row">
  <div class="col-md-4"><span>.col-md-4</span></div>
  <div class="col-md-4 offset-md-4"><span>.col-md-4 .offset-md-4</span></div>
</div>
<div class="row mt-2">
  <div class="col-md-3 offset-md-3"><span>.col-md-3 .offset-md-3</span></div>
  <div class="col-md-3 offset-md-3"><span>.col-md-3 .offset-md-3</span></div>
</div>

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

<div class="row">
  <div class="col order-last"><span>First in DOM, ordered last</span></div>
  <div class="col"><span>Second in DOM, unordered</span></div>
  <div class="col order-first"><span>Third in DOM, ordered first</span></div>
</div>

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

<div class="row">
  <div class="col"><span>col</span></div>
  <div class="col"><span>col</span></div>
  <div class="col"><span>col</span></div>
  <div class="col"><span>col</span></div>
</div>
<div class="row mt-2">
  <div class="col-8"><span>col-8</span></div>
  <div class="col-4"><span>col-4</span></div>
</div>

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

<div class="row g-0">
  <div class="col-6"><span>.col-6</span></div>
  <div class="col-6"><span>.col-6</span></div>
</div>
<div class="row g-4 mt-2">
  <div class="col-6"><span>.col-6 .g-4</span></div>
  <div class="col-6"><span>.col-6 .g-4</span></div>
</div>