Migrating from Bootstrap 4

Suppose TrailMap was originally built on Bootstrap 4 a few years back, and it's finally time to upgrade. Most of the migration is mechanical — the same visual components exist, just with renamed classes and attributes — but skip the wrong one and something breaks silently (a dropdown that no longer opens, spacing that no longer applies). This is a working reference checklist to run through TrailMap's old templates line by line.

jQuery Removal: Rewrite Any Custom JS Calls

If TrailMap has custom scripts that called Bootstrap 4's jQuery plugin API directly, those calls no longer work at all in Bootstrap 5 — there's no $(...).modal() because there's no jQuery. Each one becomes a call to a real JS class: 

// Bootstrap 4 — jQuery plugin call
$('#trailModal').modal('show');

// Bootstrap 5 — vanilla JS, construct an instance
const trailModal = new bootstrap.Modal(document.getElementById('trailModal'));
trailModal.show();

Renamed Classes & Attributes Reference

Bootstrap 4Bootstrap 5Notes
ml-* / mr-*ms-* / me-*"start"/"end" instead of left/right — supports RTL layouts correctly
pl-* / pr-*ps-* / pe-*Same start/end renaming, for padding
.form-groupPlain .mb-3.form-group was removed; a spacing utility replaces it directly on the field wrapper
.custom-select.form-selectSelect dropdowns dropped the "custom-" prefix along with the rest of the custom-form-control classes
.badge-pill.rounded-pillPill-shaped badges now use the general-purpose rounding utility instead of a badge-only modifier
.font-weight-bold.fw-boldAll font-weight/style utilities were shortened (.font-italic → .fst-italic, etc.)
data-toggle / data-targetdata-bs-toggle / data-bs-targetEvery data attribute Bootstrap's JS reads gained a bs- prefix
Note: the bs- prefix on data attributes exists specifically to avoid collisions with other libraries on the page that might also read a plain data-toggle attribute for something unrelated — it's a namespacing fix, not a cosmetic rename.

Worked Example: A TrailMap Field Group, Before and After

<!-- Bootstrap 4 -->
<div class="form-group">
  <label for="trailDifficulty">Difficulty</label>
  <select class="custom-select" id="trailDifficulty">
    <option>Easy</option>
  </select>
</div>

<!-- Bootstrap 5 -->
<div class="mb-3">
  <label for="trailDifficulty" class="form-label">Difficulty</label>
  <select class="form-select" id="trailDifficulty">
    <option>Easy</option>
  </select>
</div>

The New xxl Breakpoint

Bootstrap 4's grid stopped at xl (1200px). Any Bootstrap 5 template can now also use col-xxl-*, d-xxl-*, and every other responsive utility suffix at a 1400px breakpoint — nothing to migrate here, it's a pure addition, but worth knowing before you assume xl is still the largest breakpoint available.

Next: That's every mechanical rename covered. Best Practices Recap closes out the track by tying every lesson's advice together into one checklist.