Migrating to Bootstrap 4
Suppose TrailMap was built on Bootstrap 3 and it's time to move it forward. Nearly every
Bootstrap-3-specific detail this track flagged along the way — LESS, the xs grid infix,
Glyphicons, Panels/Wells/Thumbnails, the Affix plugin — changed in Bootstrap 4. This lesson pulls every
one of those call-outs together into a single reference table you can run down line by line before you
touch any code.
Toolchain Change: LESS to Sass
This is the one item on the list that isn't a class rename — it's a build-tooling change. Bootstrap 4
rewrote the entire source from LESS to Sass, so the workflow from the
LESS Customization lesson — @variable overrides
compiled with lessc — has to be replaced with a Sass toolchain ($variable
overrides compiled with dart-sass or a bundler's Sass loader) before anything else on this
page matters.
Full Class & Component Reference Table
| Bootstrap 3 (this track) | Bootstrap 4 | Notes |
|---|---|---|
LESS (@variables) | Sass ($variables) | Needs a new build toolchain, not just a find-and-replace |
.col-xs-* | Unprefixed .col-* | .col-* becomes the default (smallest) breakpoint; .col-sm/md/lg stay, and a new .col-xl is added above them |
| Panels, Wells, Thumbnails (3 components) | One unified Card component | All three of this track's separate lessons map onto .card, .card-body, .card-header |
| Glyphicons (built in) | Dropped entirely | No replacement icon set ships with Bootstrap 4 — pair it with Font Awesome or a similar icon library |
.navbar-default / .navbar-inverse | .navbar-light / .navbar-dark | Renamed to describe the navbar's own color scheme rather than a light/inverse pairing |
.control-label | .col-form-label | Form label class renamed as part of the forms overhaul |
.in (open collapse state) | .show | Bootstrap 4 standardized on .show for every toggled-visible state, not just Collapse |
Plain .item (Carousel slide) | .carousel-item | Carousel slide class became component-namespaced instead of a generic name |
Affix plugin (data-spy="affix") | Removed — use CSS position: sticky | No JS plugin replacement; it's a one-line CSS property now |
| Pager component | Removed entirely | No direct replacement — rebuild simple prev/next navigation from plain markup and utility classes |
.img-responsive | .img-fluid | Straight rename, same behavior (max-width: 100%, height: auto) |
.center-block | .mx-auto | Centering a block-level element becomes a margin utility instead of a dedicated class |
.btn-group-justified | Removed — use flex utilities | Rebuild a full-width, evenly-spaced button group with .d-flex and flex-grow utilities on each button |
Contextual .badge-{color} (color built into one class) | .badge + .badge-{color} utility combo | Same visual result, but the color now comes from pairing two classes rather than one flat contextual class |
Reading the Table
A few of these rows are mechanical find-and-replace jobs — .img-responsive to
.img-fluid, or .navbar-default to .navbar-light. Others need an
actual look at the rendered markup before you touch anything:
.img-responsive mechanically; "pick an icon library and swap every
<span class="glyphicon ..."></span>" needs a human pass through the templates.Where to Go Deeper
This table is a checklist, not a tutorial — for the full walkthrough of Bootstrap 4's flexbox grid, Sass build, Card component, and everything else new, head to this site's own Bootstrap 4 track. It covers all of the right-hand column here in depth, lesson by lesson.