Grid Alignment, Ordering and Offsets

You already know how to split a row into responsive columns. This lesson covers the second half of the grid: controlling where those columns sit. You will align columns vertically and horizontally inside a row, change their visual order per breakpoint without touching the HTML, push columns sideways with offsets, and force wrapping exactly where you want it.

Vertical Alignment

A .row is a flex container, so flexbox alignment utilities work on it directly. Use align-items-* on the row to align every column, or align-self-* on one column:

html

<div class="row align-items-center bg-light" style="height: 160px">
  <div class="col">Centered vertically</div>
  <div class="col align-self-start">Pinned to the top</div>
  <div class="col align-self-end">Pinned to the bottom</div>
</div>

Available values are start, center and end. This is the standard way to center text next to an image or align a button with a heading.

Horizontal Alignment

When columns do not fill all 12 units, justify-content-* on the row decides where the leftover space goes:

| Class | Effect | |---|---| | justify-content-start | Columns hug the left (default) | | justify-content-center | Columns centered in the row | | justify-content-end | Columns hug the right | | justify-content-around | Equal space around each column | | justify-content-between | First and last columns touch the edges | | justify-content-evenly | Equal space between and around |

html

<div class="row justify-content-center">
  <div class="col-md-6">A centered 6-column form</div>
</div>

Every alignment class accepts a breakpoint infix, e.g. justify-content-md-between.

Reordering Columns

.order-* classes change the visual order while the DOM order stays the same, which matters for screen readers and SEO. Values run from order-0 to order-5, plus order-first (-1) and order-last (6):

html

<div class="row">
  <div class="col order-last">First in HTML, shown last</div>
  <div class="col">Second in HTML, shown first</div>
  <div class="col order-first">Third in HTML, shown first of all</div>
</div>

The most common real-world pattern is swapping an image and text on larger screens only:

html

<div class="row">
  <div class="col-md-6 order-md-2"><img src="hero.png" class="img-fluid" alt=""></div>
  <div class="col-md-6 order-md-1"><h1>Text stays first on phones</h1></div>
</div>

On screens below md no order class applies, so the image stays on top as written in the HTML.

Offsetting Columns

.offset-{breakpoint}-{n} adds a left margin of n columns. It is the grid-aware way to push a column to the right or center a fixed-width block:

html

<div class="row">
  <div class="col-md-4">Left</div>
  <div class="col-md-4 offset-md-4">Pushed to the far right</div>
</div>

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

Offsets reset at each breakpoint, so offset-lg-0 clears an offset set with offset-md-2. For arbitrary spacing you can also use margin utilities such as ms-auto or me-auto on a column, which push it against the opposite edge regardless of column math.

Column Wrapping and Breaks

If the columns in a row exceed 12 units, the extra columns wrap to a new line automatically:

html

<div class="row">
  <div class="col-9">9</div>
  <div class="col-4">4 - wraps because 9 + 4 > 12</div>
  <div class="col-6">6 - sits next to the 4</div>
</div>

To force a break at a chosen point, insert a full-width empty element. It can be made responsive with display utilities:

html

<div class="row">
  <div class="col-6 col-sm-3">1</div>
  <div class="col-6 col-sm-3">2</div>
  <div class="w-100 d-none d-md-block"></div>
  <div class="col-6 col-sm-3">3 - new line from md up</div>
  <div class="col-6 col-sm-3">4</div>
</div>

Tips

Put alignment classes on the .row, not on .container; the container is not a flex box.
Reordering is visual only. Keep the natural reading order sensible in the HTML, and use order-* for cosmetics.
Prefer offset-* when the gap must equal whole columns; prefer ms-auto when you only want "push to the right".
Combine justify-content-center with text-center when you want both the column and its text centered.

Key Takeaways

align-items-* on the row (or align-self-* on a column) controls vertical alignment; justify-content-* controls horizontal distribution.
order-first, order-last and order-0 to order-5 reorder columns visually per breakpoint.
offset-{bp}-{n} pushes a column right by n grid units and is the standard way to center fixed-width columns.
Columns wrap automatically past 12 units; a .w-100 element forces a break wherever you need one.
All of these utilities accept breakpoint infixes, so layouts can differ on phones and desktops.

Next lesson: Gutters, Row Columns and Nested Grids - control the spacing between columns, generate equal columns with row-cols-*, and build grids inside grids.