Breakpoints & Responsive Grid

The -md- in col-md-4 is a breakpoint infix — it tells Bootstrap 5 "apply this from the md width upward." There are six of these breakpoints in total, and understanding how they stack is what lets you build one column that behaves differently on a phone, a tablet, and a desktop, all from a single <div>.

The Six Breakpoints and Their Widths

Mobile-First: Unprefixed vs Prefixed Classes

Bootstrap 5's grid is mobile-first. An unprefixed class like .col-12 applies at every screen size unless a larger breakpoint overrides it. A prefixed class like .col-sm-6 only takes effect at sm (576px) and up — it does nothing on a screen narrower than that. This means you style for the smallest screen first, then add breakpoint classes to change behavior as the screen grows, never the other way around.

Combining Breakpoints on One Column

You can stack several breakpoint classes on the same element. Each one only overrides at its own width and up, so read them left to right as "starting from this size, take over":

<div class="col-12 col-sm-6 col-lg-4">
  <!-- full width on phones, half width from 576px, one-third from 992px -->
</div>

Worked Example: A Responsive TrailMap Grid

The trail-listing page should show 1 column on mobile, 2 columns on tablet, and 3 columns on desktop. That's col-12 (full width, the mobile-first default), col-sm-6 (half width from 576px), and col-lg-4 (one-third from 992px) — all on the same card column:

<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Eagle Ridge Loop</h5>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Willow Creek Trail</h5>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Summit Pass</h5>
      </div>
    </div>
  </div>
</div>

On a phone (< 576px) each card takes the full row. From 576px to 991px, two cards sit side by side. From 992px up, all three fit on one row — no media queries written by hand.