Grid System Basics

Inside a container, Bootstrap 5 divides horizontal space into 12 columns. You lay content out by wrapping it in a .row, then splitting that row into .col-* children whose widths always add up against that 12-column total. Let's build the TrailMap trail-card grid with it.

The 12-Column Grid

Think of every .row as a strip that's always 12 units wide, no matter the screen size. A column class like .col-4 claims 4 of those 12 units — so three .col-4 elements exactly fill one row:

<div class="row">
  <div class="col-4">4 units</div>
  <div class="col-4">4 units</div>
  <div class="col-4">4 units</div>
</div>

.row + .col: Equal-Width Auto Layout

If you don't specify a number, plain .col makes every column in that row share the space equally — and it stays equal no matter how many columns you add:

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

Explicit Column Widths: .col-6, .col-4, etc.

Use .col-1 through .col-12 when you need specific proportions instead of an equal split. A TrailMap trail-detail page might split into a wider description column and a narrower stats sidebar:

<div class="row">
  <div class="col-8">
    <h2>Eagle Ridge Loop</h2>
    <p>A 6.2 mile loop with sweeping ridge views.</p>
  </div>
  <div class="col-4">
    <ul>
      <li>Distance: 6.2 mi</li>
      <li>Elevation gain: 1,450 ft</li>
      <li>Difficulty: Moderate</li>
    </ul>
  </div>
</div>

Worked Example: TrailMap's Trail-Card Grid

The trail-listing page needs three cards per row on medium screens and up. Give each card column .col-md-4 — 4 units out of 12, three times, filling the row from md upward, while stacking full-width below that:

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Eagle Ridge Loop</h5>
        <p class="card-text">6.2 mi · Moderate</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Willow Creek Trail</h5>
        <p class="card-text">3.1 mi · Easy</p>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Summit Pass</h5>
        <p class="card-text">8.9 mi · Hard</p>
      </div>
    </div>
  </div>
</div>