Columns

Column alignment, ordering, and offsetting within the flexbox grid, plus standalone column width classes for non-grid contexts.

@layer layout

Overview

Columns are the innermost structural layer of the grid — they sit inside a .row, receive gutter padding, and hold page content. This page covers the alignment, reordering, and offsetting features that operate on columns directly. For the base row/column structure and responsive column sizing, see the Grid system.

Alignment

Flexbox alignment utilities apply at both the row and column level. Row-level classes affect all columns uniformly; column-level classes override alignment for individual items.

Vertical alignment

.align-items-{value} on a .row controls the cross-axis position of all columns simultaneously. Available values: start, end, center, baseline, stretch.

One of three columns

<div class="container text-center">
  <div class="row align-items-start">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

One of three columns

<div class="container text-center">
  <div class="row align-items-center">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

One of three columns

<div class="container text-center">
  <div class="row align-items-end">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

.align-self-{value} on a column overrides the row's align-items setting for that column only.

One of three columns

<div class="container text-center">
  <div class="row">
    <div class="col align-self-start">One of three columns</div>
    <div class="col align-self-center">One of three columns</div>
    <div class="col align-self-end">One of three columns</div>
  </div>
</div>

Horizontal alignment

.justify-content-{value} on a .row distributes columns along the main axis. Available values: start, center, end, around, between, evenly.

One of two columns

<div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
</div>

Column wrapping

When the sum of column spans in a row exceeds 12, the overflow columns wrap to a new line as a group.

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

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column breaks

A <div class="w-100"> inserted between column elements forces subsequent columns to start on a new line within the same .row. This avoids splitting content across separate .row elements when the markup structure prevents it.

.col-6 .small:col-3

<div class="container text-center">
  <div class="row">
    <div class="col-6 small:col-3">.col-6 .small:col-3</div>
    <div class="col-6 small:col-3">.col-6 .small:col-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 small:col-3">.col-6 .small:col-3</div>
    <div class="col-6 small:col-3">.col-6 .small:col-3</div>
  </div>
</div>

Responsive display utilities make the break conditional on viewport size.

.col-6 .small:col-4

<div class="container text-center">
  <div class="row">
    <div class="col-6 small:col-4">.col-6 .small:col-4</div>
    <div class="col-6 small:col-4">.col-6 .small:col-4</div>

    <!-- Force next columns to break to new line at medium breakpoint and up -->
    <div class="w-100 d-none medium:d-block"></div>

    <div class="col-6 small:col-4">.col-6 .small:col-4</div>
    <div class="col-6 small:col-4">.col-6 .small:col-4</div>
  </div>
</div>

Reordering

Column order can be changed visually without altering DOM order, using either .order-* classes or offset margins.

Order classes

.order-{n} sets the flexbox order property for visual reordering independent of DOM position. Values 0 through 5 are generated across all six breakpoints, so the order can be set per tier (e.g. .order-1.medium:order-2). .order-first applies order: -1; .order-last applies order: 6.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<div class="container text-center">
  <div class="row">
    <div class="col">First in DOM, no order applied</div>
    <div class="col order-5">Second in DOM, with a larger order</div>
    <div class="col order-1">Third in DOM, with an order of 1</div>
  </div>
</div>

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

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

Offsetting columns

Two mechanisms push a column to the right: offset classes, which consume grid track space, and margin utilities, which use margin-inline-start: auto.

Offset classes

{breakpoint}:offset-{n} advances a column by n tracks using margin-inline-start. For example, .medium:offset-4 moves a column four tracks to the right from the medium breakpoint upward. Reset an offset at a larger breakpoint with {breakpoint}:offset-0.

.medium:col-4

.medium:col-4 .medium:offset-4

.medium:col-3 .medium:offset-3

.medium:col-6 .medium:offset-3

<div class="container text-center">
  <div class="row">
    <div class="medium:col-4">.medium:col-4</div>
    <div class="medium:col-4 medium:offset-4">.medium:col-4 .medium:offset-4</div>
  </div>
  <div class="row">
    <div class="medium:col-3 medium:offset-3">.medium:col-3 .medium:offset-3</div>
    <div class="medium:col-3 medium:offset-3">.medium:col-3 .medium:offset-3</div>
  </div>
  <div class="row">
    <div class="medium:col-6 medium:offset-3">.medium:col-6 .medium:offset-3</div>
  </div>
</div>

.small:col-5 .medium:col-6

.small:col-5 .small:offset-2 .medium:col-6 .medium:offset-0

.small:col-6 .medium:col-5 .large:col-6

.small:col-6 .medium:col-5 .medium:offset-2 .large:col-6 .large:offset-0

<div class="container text-center">
  <div class="row">
    <div class="small:col-5 medium:col-6">.small:col-5 .medium:col-6</div>
    <div class="small:col-5 small:offset-2 medium:col-6 medium:offset-0">.small:col-5 .small:offset-2 .medium:col-6 .medium:offset-0</div>
  </div>
  <div class="row">
    <div class="small:col-6 medium:col-5 large:col-6">.small:col-6 .medium:col-5 .large:col-6</div>
    <div class="small:col-6 medium:col-5 medium:offset-2 large:col-6 large:offset-0">.small:col-6 .medium:col-5 .medium:offset-2 .large:col-6 .large:offset-0</div>
  </div>
</div>

Margin utilities

.me-auto and .ms-auto push sibling columns by consuming available space with an automatic margin. Breakpoint-prefixed variants (e.g. .medium:ms-auto) activate at and above the named tier — see Margin utilities.

.medium:col-4

.medium:col-4 .ms-auto

.medium:col-3 .medium:ms-auto

.col-auto .me-auto

.col-auto

<div class="container text-center">
  <div class="row">
    <div class="medium:col-4">.medium:col-4</div>
    <div class="medium:col-4 ms-auto">.medium:col-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="medium:col-3 medium:ms-auto">.medium:col-3 .medium:ms-auto</div>
    <div class="medium:col-3 medium:ms-auto">.medium:col-3 .medium:ms-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Standalone columns

.col-{n} and {breakpoint}:col-{n} classes work outside a .row to give any element a percentage width matching the column grid. Gutter padding is only applied when a column class is a direct child of .row; outside that context the padding is omitted.

.col-3: width of 25%

.small:col-9: width of 75% above sm breakpoint

<div class="col-3 p-medium mb-xsmall">
  .col-3: width of 25%
</div>

<div class="small:col-9 p-medium">
  .small:col-9: width of 75% above sm breakpoint
</div>

Float-based layouts can use column width classes alongside .float-end and .float-start. Wrap the content in a .clearfix container to contain the float when the text is shorter than the floated element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="clearfix">
  <img src="..." class="medium:col-6 medium:float-end mb-medium medium:ms-medium" alt="...">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.</p>
  <p>Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
  <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

CSS

Column and offset classes are generated by the grid Sass system — see Grid system → Sass variables for the variables that control column count and gutter width.

The order-* utility range is configurable through the $utilities Sass map; the following extends the range with an .order-6 class and updates .order-last to maintain its position beyond the new value:

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6,
            last: 7
          )
        ),
      ),
    ),
  )
);

See Sass maps and loops and Modify utilities for the full customization API.