Why Bootstrap 4?

Bootstrap 4 was a ground-up rewrite of Bootstrap 3, not an incremental update. The grid engine changed, the preprocessor changed, several components were merged into one, and the built-in icon font disappeared entirely. If you're coming from Bootstrap 3 — or you're picking this up fresh and wondering why a "4" track still matters when Bootstrap 5 exists — this lesson covers exactly what changed and why so much production code, including large chunks of what you'll find on TrailMap-style hiking sites built a few years back, still runs on Bootstrap 4 today.

From Bootstrap 3 to Bootstrap 4: What Changed

The Flexbox Grid Replaces the Float-Based Grid

Bootstrap 3's .row and .col-* classes relied on float and fixed percentage widths, which meant equal-height columns, vertical centering, and ordering columns independently of source order were all awkward workarounds. Bootstrap 4's grid is built on display: flex, so those things become built-in behavior instead of hacks.

<div class="row">
  <div class="col-md-6">Half width on medium and up</div>
  <div class="col-md-6">Half width on medium and up</div>
</div>

Because the row is a flex container, both columns above stretch to the same height automatically — no extra CSS required.

Sass Replaces LESS

Bootstrap 3 shipped its source files as .less. Bootstrap 4 rewrote the entire source in Sass (.scss), which brought maps, loops, and better math functions to the theming system. If you're customizing colors or spacing at build time instead of just overriding compiled CSS, you're writing Sass, not LESS.

// _custom-variables.scss
$primary: #2e7d32;
$body-bg: #fafafa;

@import "bootstrap";

One Card Component Replaces Panels, Thumbnails, and Wells

In Bootstrap 3, a boxed piece of content might have been a .panel, a .thumbnail, or a .well depending on what you needed — three components with overlapping purposes. Bootstrap 4 collapses all three into a single flexible .card component you'll use for everything from a TrailMap trail summary to a simple sidebar box.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Blue Ridge Loop</h5>
    <p class="card-text">A moderate 6.2 mile loop with a summit view.</p>
    <a href="#" class="btn btn-primary">View Trail</a>
  </div>
</div>

No Built-In Icon Set: Glyphicons Are Gone

Bootstrap 3 shipped its own Glyphicons font, so <span class="glyphicon glyphicon-map-marker"> just worked out of the box. Bootstrap 4 removed Glyphicons entirely and ships no icon font of its own — you pick your own icon library, commonly Font Awesome, and load it separately alongside Bootstrap.

<i class="fa fa-map-marker" aria-hidden="true"></i> Trailhead parking

Why Bootstrap 4 Is Still Worth Learning Today

Bootstrap 5 removed the jQuery dependency and renamed a few utility classes, but the gap between "Bootstrap 4 exists" and "nobody uses it anymore" is enormous. A huge number of production codebases — admin dashboards, marketing sites, internal tools, and yes, hiking-trail directories like TrailMap — were built on Bootstrap 4 and have no pressing reason to be rewritten just to chase a version number. Maintaining, extending, or bug-fixing that code requires knowing Bootstrap 4 specifically: its grid classes, its data-toggle attribute API, and its jQuery plugin behavior.