Bootstrap 5
A ready-made responsive component framework.
Bootstrap 5 is taught here in 13 lessons, running from The grid system through to Migrating from Bootstrap 4 and knowing the limits. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.
| Track | Front-end Development |
| Lessons | 13 |
| Level | Beginner to intermediate |
| Reading time | about 3 hours |
| Prerequisites | Helpful, but not required: Tailwind CSS |
Lessons
- The grid systemContainers, rows and columns, the six breakpoints, gutter classes, and the layout recipes that cover most pages.
- Navbar, modal and formsAssemble a collapsing navbar, drive a modal with data attributes or JavaScript, and use the validation classes for what they are.
- Utilities and Sass customisationThe utility API in practice, colour modes driven by data-bs-theme, and rebuilding Bootstrap from Sass to change the design system properly.
- Layout beyond the grid: positioning and spacing recipesBuild page shells with flex utilities, keep headers sticky without breaking scroll, and use positioning and viewport sizing deliberately.
- Typography, tables, images and content componentsUse the type scale, table variants and card primitives so ordinary pages look deliberate without a stylesheet.
- Forms in depthMove past basic inputs: floating labels, input groups, grid-aligned layouts, validation states driven by real server responses, and the accessibility details that make them usable.
- Navigation and disclosure patternsTabs, breadcrumbs, dropdowns, scrollspy and offcanvas — and how to choose between them instead of stacking all five.
- Overlays: tooltips, popovers and toastsConfigure and trigger tooltips and popovers correctly, build toasts that stack and auto-dismiss, and know when an overlay is the wrong tool.
- The JavaScript API, plugins and eventsConstruct plugins from JavaScript, pass options, listen to framework events, handle dynamically added markup, and avoid the double-initialisation trap.
- Accessibility with BootstrapWhat the framework handles for free, what you still owe, and how to test the result with a keyboard before shipping.
- Theming with CSS variables, RTL and colour modesRetheme components without Sass, build a dark mode that actually covers your custom styles, and make the layout work in a right-to-left locale.
- Building a complete page with BootstrapAssemble a marketing landing page and a dashboard shell, combining the grid, cards, navbar and tables — plus the composition mistakes that cost the most time.
- Migrating from Bootstrap 4 and knowing the limitsThe Bootstrap 4 to 5 breaking changes that actually break builds, then an honest comparison with Tailwind and plain CSS.
More in Front-end Development
HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Tailwind CSS Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome
FAQ
How long does the Bootstrap 5 course take?
It has 13 lessons, about 3 hours of reading. Expect roughly twice that if you type out and run every example.
Do I need prior experience for Bootstrap 5?
Not strictly. It helps to have read Tailwind CSS first, because some lessons build on it, but every lesson explains its own assumptions.
What should I read after Bootstrap 5?
Continue with Foundation (12 lessons), the next course in Front-end Development.