Best Practices Recap
Forty-eight lessons, one framework, one running example — TrailMap went from a bare page to a fully-styled, componentized, JS-powered site along the way. This closing lesson isn't new material; it's the short list of habits worth carrying into every Bootstrap 3 project you build after this track.
The Recap Checklist
| Practice | Why |
|---|---|
| Prefer Bootstrap's existing classes over custom CSS overrides | .btn-primary, .panel-warning, .text-muted and the rest already cover most needs — a custom rule is one more thing to maintain and one more specificity fight to win |
| Customize via LESS variables, not CSS overrides | Resetting @brand-primary before compiling (see LESS Customization) re-themes every component consistently; hand-written overrides drift out of sync as the codebase grows |
Keep the script load order: jQuery, then bootstrap.min.js | Bootstrap 3's plugins are jQuery plugins — they attach to $.fn and fail silently if jQuery isn't loaded first. No Popper.js is needed for this version; that dependency didn't arrive until Bootstrap 4's tooltips/popovers. |
| Remember which conventions are Bootstrap-3-era | .form-group/.control-label, Glyphicons, and Panels/Wells/Thumbnails are all patterns this exact track taught as current — but see the Migrating to Bootstrap 4 table for what each one becomes if you ever move on |
| Accessibility isn't automatic | aria-hidden on decorative Glyphicons and .sr-only labels on icon-only buttons (see Accessibility & Performance) have to be added by hand every time — Bootstrap only bakes in ARIA for a few whole components like Modal |
Script Load Order, One More Time
Because it's the single most common "why isn't my dropdown/modal/tab working" bug, here's the correct
order one last time — exactly what every lesson in this track loaded in its own <head>:
<!-- 1. jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 2. bootstrap.min.js second -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- no Popper.js needed here — that's a Bootstrap 4+ dependency -->TrailMap, End to End
Across this track TrailMap picked up a responsive grid, a styled navbar with a working toggle, forms for submitting new trails, panels and list groups for trail cards, alerts for form feedback, a modal for trail details, a carousel for trail photos — every one of Bootstrap 3's components applied to one coherent example, instead of isolated snippets with nothing connecting them.
This Isn't Just History
codingwithsonu.com itself is built on Bootstrap 3.4.1 — the exact CDN link loaded at the top of this very page. Everything in this track — the grid, the navbar, the sidebar you've been reading from, the buttons you clicked to get here — is running in production, today, on the framework you just spent 48 lessons learning. Bootstrap 3 isn't a museum piece; it's a genuinely solid, stable choice for a real site.