Bootstrap 3 Tutorial

Home Next

Bootstrap 3 is the classic release that made Bootstrap the default choice for responsive web design — a float-based, mobile-first grid, a built-in Glyphicons icon font, and components like Panels, Wells, and Thumbnails that later versions merged into one unified Card. This track covers 48 lessons: the grid, typography, forms, every built-in component, and every jQuery-powered JS plugin (Modal, Tab, Scrollspy, Affix, and more). It's not just a history lesson either — this very site is built with Bootstrap 3.4.1, the exact CDN link loaded at the top of this page, so what you learn here explains the framework actually running under codingwithsonu.com right now.

Why start here instead of Bootstrap 5? If you're maintaining an older codebase, or you just want to understand where the whole flexbox grid, Card component, and utility-class approach came from, this is the track. Building something brand new with no legacy constraint? Our Bootstrap 5 track is the better starting point.

What Bootstrap 3 Introduced (and What Changed Later)

Bootstrap 3 (this track)	What Later Versions Did
Float-based grid, LESS, `col-xs-*`	Bootstrap 4 switched to a flexbox grid and Sass; dropped the `xs` infix for the default breakpoint
Panels, wells, thumbnails (3 separate components)	Bootstrap 4 merged all three into one Card component
Glyphicons built in	Bootstrap 4 dropped the built-in icon set entirely (pairs with Font Awesome or similar)
Affix plugin (`data-spy="affix"`)	Removed in Bootstrap 4 — use the CSS `position: sticky` property instead
`.navbar-default` / `.navbar-inverse`	Renamed to `.navbar-light` / `.navbar-dark` in Bootstrap 4

This track flags each of these Bootstrap-3-specific patterns explicitly where they come up, so you always know what's timeless and what changed.

A Quick Look Ahead

Example: A Bootstrap 3 Panel

<div class="panel panel-primary">
  <div class="panel-heading">Panel Title</div>
  <div class="panel-body">
    Some quick example content.
  </div>
</div>

Note: A Panel is one of three components (with Well and Thumbnail) that Bootstrap 4 later folded into a single Card. You'll build all three separately in this track, and see exactly how each maps onto Card when we get to the migration lesson.

What You'll Learn In This Track

Area	Covered in
Foundations	Why Bootstrap 3, setup, grid system, offset/nest/reorder, containers, responsive utilities
Typography & content	Typography, code, tables, images, helper classes
Forms	Basics, layouts, control states, input groups
Components: basics	Buttons, button groups, button dropdowns, Glyphicons, labels, badges
Components: content	Alerts, panels, wells, thumbnails, media object, list group, responsive embed
Components: navigation	Navs, navbar, dropdowns, breadcrumbs, pagination, pager, jumbotron & page header
JS plugins	Transitions, modal, dropdown, scrollspy, tab, tooltip & popover, alert & button, collapse, carousel & affix
Customization & best practices	LESS customization, accessibility & performance, migrating to Bootstrap 4, best practices recap

Next steps: Head to Why Bootstrap 3? before installing anything.

Home Next