Grid Alignment and Ordering

Because a Bootstrap .row is a flexbox container under the hood, you get flexbox's alignment and ordering controls for free — as utility classes, with no custom CSS needed.

Vertical alignment

When columns in a row have different amounts of content, they stretch to match each other's height by default. To align them to the top, middle, or bottom instead, add an align-items-* class to the row:

<div class="row align-items-center" style="height: 200px;">
  <div class="col">Short</div>
  <div class="col">
    This column has<br />much more<br />content in it
  </div>
</div>

align-items-center vertically centers every column relative to the tallest one. align-items-start and align-items-end pin them to the top or bottom instead. Need just one column to break from the row's alignment? Add align-self-* to that column alone rather than changing the whole row.

Horizontal justification

When columns don't fill the full 12 units of a row, justify-content-* controls how the extra space is distributed:

<div class="row justify-content-between">
  <div class="col-3">Logo</div>
  <div class="col-3">Nav links</div>
</div>

justify-content-between pushes the two columns to opposite ends of the row; justify-content-center groups them together in the middle; justify-content-around and justify-content-evenly space them out more evenly. This is the same behavior as CSS's justify-content property, applied through a class instead of a stylesheet rule.

Offsetting a column

Sometimes you want empty space before a column without adding another element to hold it. offset-* shifts a column to the right by a number of grid units:

<div class="row">
  <div class="col-md-6 offset-md-3">
    Centered 6-of-12 column
  </div>
</div>

offset-md-3 pushes this column 3 units to the right, and since it's also 6 units wide, 3 + 6 + 3 (the remaining space) centers it in the row — a common pattern for centering a form or a call-to-action without wrapping it in an extra container.

Reordering columns

order-* changes the visual order of columns without touching your HTML source order — useful when a sidebar should appear first visually but you want it to remain second in the markup for screen readers or SEO:

<div class="row">
  <div class="col order-2 order-md-1">Main content (reads second in HTML)</div>
  <div class="col order-1 order-md-2">Sidebar (reads first in HTML)</div>
</div>

On small screens the sidebar (order-1) appears above the main content; from md up, the main content (order-md-1) takes visual priority instead. Be careful with this one: reordering visually while leaving the DOM order unchanged can confuse keyboard and screen-reader users, whose navigation follows the HTML source order, not what's on screen — use it for genuine layout needs, not just to avoid writing HTML in a different order.