Logo
hummingbird

Columns

Modify columns with options for alignment, ordering, and offsetting using the flexbox grid system. Column classes can also be used to control the width of non-grid elements.

Alignment

Use flexbox utilities to align columns vertically and horizontally within a row.

Vertical alignment

Use the .items-start, .items-center, and .items-end classes to control vertical alignment.

One of three columns
One of three columns
One of three columns

HTML

<div class="container text-center">
  <div class="row 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
One of three columns
One of three columns

HTML

<div class="container text-center">
  <div class="row 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
One of three columns
One of three columns

HTML

<div class="container text-center">
  <div class="row 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>

Use the .self-start, .self-center, and .self-end classes to control vertical alignment of individual columns.

One of three columns
One of three columns
One of three columns

HTML

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

Horizontal alignment

Apply the .justify-* classes to control horizontal alignment.

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

HTML

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

Column wrapping

When a row is too wide for its columns, the columns will automatically wrap onto a new line.

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

HTML

<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

Use a full-width element to break columns to a new line.

.col-6 .sm:col-3
.col-6 .sm:col-3
.col-6 .sm:col-3
.col-6 .sm:col-3

HTML

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

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

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

By adding display utilities, columns can be controlled to break to a new line at specific breakpoints.

.col-6 .sm:col-4
.col-6 .sm:col-4
.col-6 .sm:col-4
.col-6 .sm:col-4

HTML

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

    <!-- Force next columns to break to new line -->
    <div class="w-full hidden md:block"></div>

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

Reordering

Order classes

Use .order-{number} classes to change the order of columns.

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1

HTML

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

Include .order-first and .order-last for quickly moving elements to the beginning or end of a row.

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first

HTML

<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

Grid columns can be offset in two ways: using responsive .offset-{size} grid classes or margin utilities. Grid classes provide offsets that match column sizes, while margin utilities are useful for flexible layouts where the offset width is variable.

Offset classes

Use .offset-{number} classes to move columns to the right. For example, .md:offset-4 moves a column over four columns on medium screens and larger.

.md:col-4
.md:col-4 .md:offset-4
.md:col-3 .md:offset-3
.md:col-3 .md:offset-3
.md:col-6 .md:offset-3

HTML

<div class="container text-center">
  <div class="row">
    <div class="md:col-4">.md:col-4</div>
    <div class="md:col-4 md:offset-4">.md:col-4 .md:offset-4</div>
  </div>
  <div class="row">
    <div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
    <div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
  </div>
  <div class="row">
    <div class="md:col-6 md:offset-3">.md:col-6 .md:offset-3</div>
  </div>
</div>
.sm:col-5 .md:col-6
.sm:col-5 .sm:offset-2 .md:col-6 .md:offset-0
.sm:col-6 .md:col-5 .lg:col-6
.sm:col-6 .md:col-5 .md:offset-2 .lg:col-6 .lg:offset-0

HTML

<div class="container text-center">
  <div class="row">
    <div class="sm:col-5 md:col-6">.sm:col-5 .md:col-6</div>
    <div class="sm:col-5 sm:offset-2 md:col-6 md:offset-0">.sm:col-5 .sm:offset-2 .md:col-6 .md:offset-0</div>
  </div>
  <div class="row">
    <div class="sm:col-6 md:col-5 lg:col-6">.sm:col-6 .md:col-5 .lg:col-6</div>
    <div class="sm:col-6 md:col-5 md:offset-2 lg:col-6 lg:offset-0">.sm:col-6 .md:col-5 .md:offset-2 .lg:col-6 .lg:offset-0</div>
  </div>
</div>

Margin utilities

Use margin utilities like .ms-auto to push columns to the right.

.md:col-4
.md:col-4 .ms-auto
.md:col-3 .md:ms-auto
.md:col-3 .md:ms-auto
.col-auto .me-auto
.col-auto

HTML

<div class="container text-center">
  <div class="row">
    <div class="md:col-4">.md:col-4</div>
    <div class="md:col-4 ms-auto">.md:col-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="md:col-3 md:ms-auto">.md:col-3 .md:ms-auto</div>
    <div class="md:col-3 md:ms-auto">.md:col-3 .md: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 column classes

The .col-{size} classes can be used outside of a .row for quick column layouts.

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

HTML

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

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