Advanced Grid

The basic .col-* grid from earlier in this track gets you a straightforward row-and-column layout, but Bootstrap 4's grid can do more: visually reorder columns without touching the HTML source order, push a column across the row without an empty spacer column, nest a whole grid inside a single column, and — since a later Bootstrap 4 point release — lay out an equal number of columns per row without hand-writing a breakpoint class for every column. We'll rebuild pieces of TrailMap's trail card grid using each of these.

.order-*: Reordering Columns Visually

Columns render in source order by default. .order-* (0 through 5, plus .order-first/.order-last) changes the visual order using flexbox's order property, without moving a single line of HTML:

<div class="row">
  <div class="col order-2">First in HTML, renders second</div>
  <div class="col order-1">Second in HTML, renders first</div>
</div>

This is useful when TrailMap's mobile layout needs a trail's "Save" button to appear above its description, but the description still needs to come first in the HTML for screen readers and SEO.

.offset-*: Pushing a Column Over

.offset-{breakpoint}-{1-11} adds left margin equal to that many columns' width — useful for centering a narrower column without wrapping it in an extra row, or leaving deliberate whitespace beside it:

<div class="row">
  <div class="col-md-6 offset-md-3">
    Centered 6-wide column (3 columns of empty space on each side)
  </div>
</div>

Nested Grids

Any column can contain its own full .row, which starts a brand new set of 12 columns scoped to that parent column's width — handy for a TrailMap trail card that needs its own two-column layout (a small map thumbnail beside stats) inside a single column of the outer page grid:

<div class="col-md-6">
  <div class="row">
    <div class="col-6">Map thumbnail</div>
    <div class="col-6">Distance & elevation stats</div>
  </div>
</div>

.row-cols-*: Equal Columns Per Row (Bootstrap 4.4+)

Note: .row-cols-* was a late addition to Bootstrap 4 — it only shipped in Bootstrap 4.4. If a project is pinned to an earlier 4.x release, this class won't be available and each column needs an explicit .col-* width instead.

Put .row-cols-{breakpoint}-{1-6} on the .row itself, and every direct .col child automatically gets an equal share of the row — no per-column width class needed at all:

<div class="row row-cols-1 row-cols-md-3">
  <div class="col">...card...</div>
  <div class="col">...card...</div>
  <div class="col">...card...</div>
</div>

Worked Example: TrailMap's Trail Card Grid with .row-cols-md-3

One stacked column on narrow screens, three equal cards per row at md and up — no col-md-4 arithmetic required on each card:

<div class="row row-cols-1 row-cols-md-3">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Ridgeline Loop</h5>
      </div>
    </div>
  </div>
  <!-- repeat .col per trail card -->
</div>

Adding a fourth or fifth trail card later needs no grid math at all — just add another .col and .row-cols-md-3 keeps every row at three even cards.

Next up, Bootstrap 4 ships with no icons of its own — learn how TrailMap pairs it with Font Awesome in Icons (No Built-In Set).