Why Bootstrap 3?
Before you install anything, it's worth understanding what Bootstrap 3 actually was: the release that turned "responsive design" from a nice-to-have into the default expectation for any CSS framework. It's also not a purely historical curiosity for this tutorial series - this very site is built on Bootstrap 3.4.1, so everything you learn in this track explains the framework that renders the page you're reading right now.
The Release That Made Responsive the Default
Bootstrap 2 offered a responsive grid, but only as an optional add-on you had to bring in separately - most sites built with it shipped a fixed, desktop-only layout. Bootstrap 3 rewrote the framework mobile-first from the ground up: the grid, the navbar, the typography, everything scaled from small screens up automatically, with no extra opt-in step. That single decision is what made "of course it's responsive" the baseline every CSS framework since has had to match.
What Bootstrap 3 Includes
Four pieces work together to make up the framework:
| Piece | What It Gives You |
|---|---|
| Float-based grid | A 12-column, mobile-first layout system using .row and .col-*-* classes |
| LESS source | Every component's styling is authored in LESS variables you can override for a custom-branded build |
| Glyphicons | An icon font bundled directly into the framework - no separate icon library needed |
| jQuery plugins | Modal, Tab, Scrollspy, Affix, Carousel and more, all wired up with data-toggle / data-target attributes |
A Glyphicon needs nothing more than a <span> with two classes:
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<!-- renders a star icon, no icon library CDN required -->Proof: codingwithsonu.com Runs on Bootstrap 3.4.1
Look at the top of this very page's HTML source, in the <head> block. It
loads the same CDN reference used across the whole site:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>The sidebar you're navigating, the "Prev / Next" buttons above, the tables on this page - all of it is Bootstrap 3.4.1 markup. Learning this track isn't an abstract exercise; it's a direct explanation of the framework actually running underneath codingwithsonu.com.
Why It's Still Worth Learning
- Legacy codebases. Countless production sites and internal admin tools were built years ago and never upgraded - if you maintain one, you need to read this grid fluently.
- WordPress and CMS themes. A large share of older WordPress themes and admin templates bundle Bootstrap 3 directly.
- Understanding the migration path. Knowing exactly what Bootstrap 3 looked like makes the jump to Bootstrap 4's flexbox grid, and then Bootstrap 5, much easier to reason about.
- Transferable fundamentals. The 12-column mental model, container/row/column nesting, and component-driven markup all carry forward unchanged into later versions.