Grid System Basics

Inside a container, Bootstrap 4 divides horizontal space into 12 columns using flexbox. Every grid layout on TrailMap — the hero, the trail-card listing, the two-column detail page — is built from the same two building blocks: a .row and one or more .col elements inside it.

The 12-Column Flexbox Grid

The grid always adds up to 12 units per row. A column spanning col-4 takes a third of the row, col-6 takes half, and three col-4 columns fill the row exactly. Because the grid is flexbox-based, columns in the same row are equal-height by default.

.row and .col: How They Work Together

.row is a flex container with a small negative margin that cancels out the padding on the columns inside it, so columns line up flush with the container's edges. Every .col-* must be a direct child of a .row:

<div class="row">
  <div class="col-4">One</div>
  <div class="col-4">Two</div>
  <div class="col-4">Three</div>
</div>

Auto-Layout Columns vs Explicit Widths

Using bare .col with no number splits the row evenly among however many columns you add — useful when you don't want to do the arithmetic yourself:

<div class="row">
  <div class="col">Easy</div>
  <div class="col">Moderate</div>
  <div class="col">Hard</div>
</div>

All three columns above end up exactly 4 units wide, automatically. Use explicit widths like col-6 or col-4 instead when different columns need different proportions, such as a wide description column next to a narrow stats sidebar.

Building a TrailMap Trail-Card Grid

A trail listing page laid out three cards per row on medium screens and up:

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Blue Ridge Loop</h5>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Sunset Ridge</h5>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Cedar Falls Trail</h5>
      </div>
    </div>
  </div>
</div>

Each col-md-4 is a third of the row, so three cards fit per line on medium screens and up. Below the medium breakpoint the cards stack full-width, one per line — the next lesson covers exactly why that happens.

Column Wrapping and the 12-Column Limit

If the column widths in a single row add up to more than 12, the extra columns wrap onto a new line rather than overflowing — four col-4 elements in one row means the first three fill the row exactly, and the fourth drops down to start a fresh row beneath them.