Best Practices Recap
This is the last lesson of the Bootstrap 5 track, so instead of introducing anything new, it pulls the recurring advice from all 48 lessons before it into one checklist. Every item below points back to the lesson that covers it in depth — treat this page as the list to re-read before shipping any real TrailMap-style project, not as a substitute for the lessons themselves.
The Recap Checklist
| Do this | Why |
|---|---|
| Reach for a utility class before writing custom CSS | Utilities like .mt-3 or .d-flex are already tested, responsive-aware, and consistent across the whole codebase — custom CSS is for the genuine gap left over |
Customize via Sass variables and the Utility API, not !important | Overriding $primary before importing Bootstrap's source (Sass Customization) reaches every component at once; !important overrides fight the framework one selector at a time forever |
Only load bootstrap.bundle.min.js if you actually use tooltips, popovers, or dropdowns | That bundle includes Popper.js purely for those three components — skip it for a real, free reduction in page weight (Performance) |
| Test both light and dark color mode if you enable dark mode at all | data-bs-theme="dark" (Color Modes) re-themes automatically, but a custom color you added yourself may not have been designed with a dark background in mind |
| Remember accessibility isn't automatic just because you used Bootstrap | Bootstrap ships focus states and baked-in ARIA on its own components, but alt text, contrast after a color change, and heading order are still on you (Accessibility) |
Utilities First, Custom CSS Last
Across the whole track, the fastest way to spot a project drifting away from Bootstrap is a
growing custom stylesheet full of one-off rules that duplicate what a utility class already
does. Before adding a new rule to TrailMap's CSS, it's worth a quick scan of whether
.gap-3, .text-truncate, or a dozen other existing utilities already
solve it.
Customize the Framework, Don't Fight It
The single biggest structural decision in this track was covered early in the Customization
section: whether TrailMap's brand colors live in a Sass variable overridden before compiling,
or in a CSS file loaded after Bootstrap's and full of !important. Every lesson
after Sass Customization assumed the first approach,
because it's the one that scales as a project grows.
Watch JS Weight, Color Modes, and Accessibility on Every Release
These three are easy to get right once and quietly break later: someone adds a tooltip and
forgets to check whether the lighter bootstrap.min.js needs swapping for the
bundle; a new component gets added that never gets checked in dark mode; a new icon-only
button ships without an aria-label. None of them show up as a build error — they
show up as a support ticket, or they don't show up at all until someone relying on a
screen reader or a dark-mode preference hits them.