Bootstrap 4 Tutorial

Home Next

Bootstrap 4 was the Sass-based rewrite that introduced the flexbox grid, the Card component, and the first real wave of utility classes — and it's still running in a huge number of production sites and codebases today, even with Bootstrap 5 out. This track covers 47 lessons: the flexbox grid, utilities, every built-in component, the Bootstrap-4-only patterns that later got removed or renamed (Jumbotron, Media Object, the .custom-* form controls), forms, and Sass customization. Unlike Bootstrap 5, this version still depends on jQuery and Popper.js for every interactive component — every lesson uses the real data-toggle/data-target attribute API, not Bootstrap 5's data-bs-* equivalent.

Why learn this if Bootstrap 5 exists? Plenty of real jobs involve maintaining an existing Bootstrap 4 codebase, not starting a new one. If you're building something new from scratch with no legacy constraint, our Bootstrap 5 track is the better starting point — this one exists for when BS4 is what you're actually working with.

What Bootstrap 4 Introduced (and What Changed Later)

Bootstrap 3	Bootstrap 4 (this track)
Float-based grid, LESS	Flexbox-based grid, Sass
Panels, thumbnails, wells (3 separate components)	One unified Card component replaces all three
Glyphicons built in	No built-in icon set at all (pairs with Font Awesome or similar)
`col-xs-*` only	`col-sm/md/lg/xl` breakpoints (no `xxl` yet — that's Bootstrap 5)

Bootstrap 5 later went further: dropped jQuery entirely, renamed ml-/mr- to ms-/me-, removed Jumbotron and Media Object, and replaced the .custom-* form classes. This track flags each of those Bootstrap-4-specific patterns explicitly where they come up.

A Quick Look Ahead

Example: A Bootstrap 4 Card with a Button

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Note: This exact markup is identical in Bootstrap 5 too — cards barely changed between versions. The differences show up mostly in utilities, forms, and a handful of components you'll hit later in this track.

What You'll Learn In This Track

Area	Covered in
Foundations	Why Bootstrap 4, setup & dependencies, containers, grid basics, breakpoints, gutters
Layout utilities	Flexbox, spacing (`ml-/mr-`), sizing, display/visibility, position
Typography & colors	Typography, color system, text utilities
Components: basics	Buttons, button groups, badges, alerts, cards, list groups
Components: navigation	Navbar, nav/tabs, dropdowns, breadcrumbs, pagination, progress bars
Components: interactive (jQuery)	Modal, collapse, accordion, carousel, toasts, tooltips/popovers, scrollspy
Bootstrap 4-only patterns	Jumbotron, Media Object, `.custom-*` form controls
Forms	Controls, `.form-group` layout, validation, input groups
Customization	Sass customization, advanced grid, icon options
Best practices	Accessibility, performance, migrating to Bootstrap 5, best practices recap

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

Home Next