Bootstrap 5 Tutorial

Home Next

Bootstrap 5 is the current major version of the world's most widely used CSS framework — and the biggest change from earlier versions is what it DROPS: jQuery is gone entirely, replaced with plain vanilla JavaScript for every interactive component. This track covers 49 lessons: the grid system, the utility classes that let you style most things without writing custom CSS, every built-in component (buttons through carousels), forms and validation, and how to actually customize Bootstrap 5 with Sass instead of fighting it with overrides. Every lesson uses real, correct Bootstrap 5 markup you can copy directly into a project.

Note on this site: Codingwithsonu.com itself is built with Bootstrap 3 (you can see it in this very sidebar/navbar). This track teaches Bootstrap 5 as its own independent subject, using its own separate class names — the two don't mix.

What Changed from Earlier Bootstrap Versions

Bootstrap 3 / 4	Bootstrap 5
Requires jQuery for every interactive component	Zero jQuery dependency — plain JavaScript, smaller page weight
Bootstrap 4 needed Popper.js loaded separately	Popper is still used for tooltips/popovers/dropdowns, but bundled correctly with Bootstrap's own JS build
Glyphicons (Bootstrap 3) built in	No built-in icon set — pairs with the separate Bootstrap Icons library instead
`col-xs-*` (BS3) then `col-sm/md/lg/xl` (BS4)	Adds an even smaller `xxl` breakpoint and refined gutter classes
Forms styled with plain classes	Redesigned form controls, floating labels, and built-in validation states

A Quick Look Ahead

Example: A Bootstrap 5 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: No JavaScript needed for this one — cards are pure CSS. You'll see plenty of components that DO need a line of JS later in the track (modals, tooltips, etc.), and each one shows exactly what that line is.

What You'll Learn In This Track

Area	Covered in
Foundations	Why Bootstrap 5, setup, containers, grid basics, breakpoints, gutters
Layout utilities	Flexbox, spacing, 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 (JS)	Modal, offcanvas, collapse, accordion, carousel, toasts, tooltips/popovers, scrollspy
Forms	Controls, layout, validation, input groups, floating labels, range/switches
Customization	Sass customization, the Utility API, color modes (dark mode), icons, advanced grid
Best practices	Accessibility, performance, migrating from Bootstrap 4, best practices recap

Next steps: Head to Why Bootstrap 5? to understand what actually changed before we install anything.

Home Next