Breakpoints & Responsive Grid

Prev Next

The col-md-4 classes from the previous lesson only apply from a certain screen width upward — that width is a breakpoint. Bootstrap 4 defines five of them, and understanding how they stack is what makes a TrailMap trail grid look right on a phone, a tablet, and a desktop from the exact same markup.

The Five Breakpoints in Bootstrap 4

Class infix	Applies from	Typical device
(none) — xs	0px and up	Phones (implicit, no infix needed)
`sm`	≥576px	Large phones / small tablets
`md`	≥768px	Tablets
`lg`	≥992px	Small laptops
`xl`	≥1200px	Desktops

The extra-small tier has no infix at all — plain col-6 means "6 columns wide from 0px up," which is why it's also the base every other breakpoint class builds on top of.

Mobile-First: How the Breakpoints Cascade

Bootstrap 4's breakpoints are min-width based, not max-width based. A rule written for md applies at 768px and every width above it, unless a larger breakpoint overrides it. That means you style for the smallest screen first, then layer on classes for wider screens — you never need to write an "undo this on desktop" rule.

<div class="col-12 col-md-6 col-lg-4">Card</div>

That single element is full-width below 768px, half-width from 768px to 991px, and a third-width at 992px and up — three layouts from one class list, read left to right as "smallest screen to largest."

Building a Responsive TrailMap Grid

The same trail-card grid from the previous lesson, now responsive across all three tiers:

<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">Blue Ridge Loop</div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">Sunset Ridge</div>
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    <div class="card">Cedar Falls Trail</div>
  </div>
</div>

One trail card per row on phones (col-12), two per row once the screen reaches tablet width (col-sm-6), and three per row on desktop-sized screens (col-lg-4) — a single set of classes covering the full range of devices a TrailMap visitor might use.

Mixing Breakpoints on One Row

Different columns in the same row don't have to use matching breakpoint infixes. A trail detail page might give the description a wider share earlier than the sidebar does:

<div class="row">
  <div class="col-12 col-md-8">Description</div>
  <div class="col-12 col-md-4">Trail stats</div>
</div>

A Note on Bootstrap 5's Extra Breakpoint

Bootstrap 4 stops at xl (1200px). It has no xxl tier — that breakpoint, for very large monitors starting at 1400px, was added later in Bootstrap 5. If you see col-xxl-* in an example online, it's Bootstrap 5 markup and it will not do anything in a Bootstrap 4 project.

Up next: Notice the gap between the cards above? See how to remove it in Removing Gutters.

Prev Next