Best Practices Recap
This is the last lesson in the Bootstrap 4 track. Rather than introduce anything new, it ties together the advice from every earlier lesson into one checklist worth keeping open the next time you're working in a Bootstrap 4 codebase — TrailMap's or anyone else's.
The Checklist
| Practice | Why |
|---|---|
| Prefer utility classes over custom CSS | Spacing, sizing, display, and text utilities cover most day-to-day layout needs without writing a new selector at all — less CSS to maintain, less chance of specificity conflicts |
Customize via Sass $variables, not !important | Overriding $primary and friends before importing Bootstrap's Sass (see Sass Customization) propagates the change everywhere automatically; !important overrides pile up one component at a time |
Load jQuery, then Popper.js, then bootstrap.min.js — in that order | Bootstrap 4's JS is written as jQuery plugins and expects Popper.js already on the page for positioning-based components; loading them out of order (or omitting one) breaks dropdowns, tooltips, and popovers silently |
Remember .form-group and .custom-* are Bootstrap-4-only conventions | They will need updating (.form-group → .mb-3, .custom-select → .form-select, etc.) if this codebase is ever migrated — see Migrating to Bootstrap 5 for the full reference table |
| Accessibility isn't automatic | Bootstrap 4 gives you focus states, .sr-only, and baked-in ARIA on documented component markup — but color contrast, meaningful alt text, and a sane heading order are still entirely your responsibility (see Accessibility) |
Script Load Order, One More Time
Because it's one of the most common "why isn't my dropdown working" bugs, the required order is worth repeating on its own:
<script src=".../jquery.min.js"></script>
<script src=".../popper.min.js"></script>
<script src=".../bootstrap.min.js"></script>(This tutorial site's own <head> uses Bootstrap's bundled build, which
already includes Popper internally — but a hand-assembled Bootstrap 4 page pulling the three
files in separately must keep them in this exact order.)
Where to Go From Here
Bootstrap 3 is still marked "Coming Soon" on the main Bootstrap hub — if you're maintaining an even older codebase, that track isn't available yet. If you're starting something brand new with no legacy constraint, Bootstrap 5 is a live, fully completed track and the better starting point today. This Bootstrap 4 track stays here for exactly the case it was written for: working with a codebase that's already on Bootstrap 4.