Why Bootstrap 5?

Bootstrap 5 is not just a version bump — it removed a hard dependency that every earlier release required, added a breakpoint for today's ultra-wide monitors, and quietly dropped support for a browser that used to eat entire sprints in workarounds. Before you write a single line of markup, it helps to know exactly what changed and why, so the classes you're about to learn make sense in context rather than feeling arbitrary. We'll use TrailMap, a fictional hiking-trail directory app, as the running example throughout this whole track.

What Actually Changed from Bootstrap 3 / 4

Bootstrap 3 / 4Bootstrap 5
Every dropdown, modal, tooltip etc. required jQueryZero jQuery — plain vanilla JavaScript, smaller total page weight
Data attributes: data-toggle, data-targetNamespaced: data-bs-toggle, data-bs-target (avoids clashing with other libraries)
Breakpoints stop at xl (1200px)Adds xxl (1400px) for large desktop monitors
Internet Explorer 10/11 officially supportedIE dropped entirely — lets Bootstrap use modern CSS (custom properties, flexbox everywhere)
Glyphicons bundled as the default icon setNo icon font included — pairs with the separate Bootstrap Icons library instead
Plain .form-control labels stacked above inputsRedesigned controls, floating labels, custom checkboxes/radios/switches, validation states built in

jQuery Is Gone — Plain Vanilla JavaScript

Every interactive Bootstrap 5 component — dropdowns, modals, collapses, tabs — now ships as a small vanilla-JS module. You wire it up with data-bs-* attributes and no $(...) in sight. Here's a TrailMap "Sort Trails" dropdown that needs no custom script at all, just the bundled Bootstrap JS: 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"
    data-bs-toggle="dropdown" aria-expanded="false">
    Sort Trails
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Distance</a></li>
    <li><a class="dropdown-item" href="#">Difficulty</a></li>
    <li><a class="dropdown-item" href="#">Rating</a></li>
  </ul>
</div>
Note: that's data-bs-toggle, not data-toggle. The bs- prefix on every data attribute is new in v5 — it's the single most common thing that breaks when someone pastes Bootstrap 4 markup into a Bootstrap 5 project.

The New xxl Breakpoint & Redesigned Forms

Bootstrap 4 topped out at xl (1200px). Bootstrap 5 adds xxl at 1400px, so a class like col-xxl-3 now exists for laying out four equal columns only on very large desktop monitors. We'll cover the full breakpoint table in the Breakpoints & Responsive Grid lesson.

Forms got a visual overhaul too. A TrailMap "submit a trail" field now looks like this, with the label floating up out of the input on focus instead of sitting above it: 

<div class="form-floating mb-3">
  <input type="text" class="form-control" id="trailName" placeholder="Trail name">
  <label for="trailName">Trail name</label>
</div>

No More Glyphicons

Bootstrap 3's built-in Glyphicons font is gone and was never replaced with an equivalent bundled set. The official companion is the separate Bootstrap Icons library — you add its own CSS/font files and use classes like bi bi-geo-alt-fill: 

<i class="bi bi-geo-alt-fill"></i> Trailhead parking available

Why Teams Still Choose Bootstrap 5

Utility-first frameworks like Tailwind get a lot of attention, and hand-rolled custom CSS always sounds appealing in theory. Bootstrap 5 keeps earning its place on real projects for a simple reason: speed to a consistent UI. A team building TrailMap can drop in .navbar, .card, .btn, .modal, and a 12-column grid, and have a professional-looking, responsive app before lunch — with every component already accessible, already cross-browser tested, and already documented. That tradeoff — less bespoke control, far less time spent — is exactly why Bootstrap 5 remains one of the most-used CSS frameworks in the world even as utility-first approaches trend upward.

Next: Head to Setup: CDN vs npm to actually get Bootstrap 5 into a project.