Aligning, offsetting and ordering columns

A Bootstrap row is a flex container, so columns can be aligned and rearranged without touching CSS. There are three groups of classes for this: alignment, offset (empty space before a column) and order.

Vertical alignment

The align-items-* class on a row aligns all columns by height: start to the top, center to the middle, end to the bottom.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row align-items-center border" style="min-height: 120px">
    <div class="col border bg-light py-2">Logo</div>
    <div class="col border bg-light py-2">Menu</div>
  </div>
</div>

The row is taller than its columns, and they sit in its middle. A single column is aligned with align-self-* on the column itself. The min-height style is only there to make the free space visible.

Horizontal alignment

When columns do not fill the row, the remaining space is distributed by justify-content-*:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row justify-content-center">
    <div class="col-6 border bg-light py-2">Sign-in form in the center</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4 border bg-light py-2">Left</div>
    <div class="col-4 border bg-light py-2">Right</div>
  </div>
</div>

The first row puts the column in the middle, the second pushes the columns to the edges. The values are start, center, end, between, around and evenly.

Offsets

The offset-* class leaves empty space of the given width before a column, again in parts of 12:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2 border bg-light py-2">Article text 8 of 12 wide</div>
  </div>
</div>

From 768 pixels there are two empty parts before the column, so it ends up centered. Another way to push a column to the right is the ms-auto class: an automatic left margin takes all free space.

Order

The order-* classes change the order of columns on screen without changing the HTML. There are order-first, order-last and numbers from 0 to 5:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-md-8 border bg-light py-2">Orders table</div>
    <div class="col-md-4 order-first order-md-last border bg-light py-2">Filters</div>
  </div>
</div>

On a phone the filters sit above the table, and from 768 pixels they move back to the right. As with columns, a breakpoint name in the class means "from this width up".

Common mistake

Reordering important content with order-*. The order changes only on screen: screen readers and the Tab key follow the HTML order. If the menu looks first but is last in the code, a keyboard user reaches it at the very end. Write the HTML in a logical order and use order-* for secondary blocks.