How this Bootstrap track works
- Real Bootstrap 5 in the playground — CSS and bundle JS load from CDN so grids, components, and interactive widgets behave like production.
- Original lesson copy — we explain patterns and trade-offs in our own words; use official docs as reference, not a script to paste.
- Prerequisites — finish HTML and CSS (box model, flex, cascade). Compare with Utility CSS or Tailwind after this track if you learn both styles.
Production apps often customize via Sass variables or CSS variables; this track teaches markup, grid, and components first.
Install on your device (macOS, Linux, Windows)
Lessons run in your browser on this site—install a modern browser and optional editor for local projects.
macOS
- Use Safari (preinstalled) or install Google Chrome / Firefox.
- Optional editor: VS Code (
brew install --cask visual-studio-code). - Open DevTools with ⌥⌘I (Chrome/Edge) or ⌥⌘C (Safari Web Inspector).
Linux
- Install Chromium or Firefox:
sudo apt update && sudo apt install -y chromium-browser firefox(Debian/Ubuntu; package names vary by distro). - Fedora:
sudo dnf install -y chromium firefox. - Optional editor: VS Code from code.visualstudio.com or
sudo snap install code --classic.
Windows
- Install Microsoft Edge or Chrome.
- Optional editor: VS Code (
winget install Microsoft.VisualStudioCode). - Open DevTools with F12 or Ctrl+Shift+I.
Verify: Open any lesson playground and click Run—output appears without installing a compiler.
Bootstrap is a component-based CSS framework: instead of styling every button and navbar from scratch, you compose pages from pre-built patterns—grid columns, cards, alerts—backed by a shared design language and responsive breakpoints.
How this track differs from plain CSS
If you completed CSS, you already know selectors, flexbox, and the box model. Bootstrap does not replace that knowledge—it packages common UI decisions into predictable class names like btn btn-primary and col-md-6.
Our Utility CSS and Tailwind tracks teach atomic utilities. Bootstrap leans the other way: opinionated components first, with helper utilities for spacing and display when you need fine-tuning.
Playground setup
Each lesson ships a full HTML document with Bootstrap 5.3 CSS and the bundled JavaScript from CDN. Edit markup and classes; interactive widgets (dropdowns, modals) behave like production when the lesson needs them.
What you will learn
- The 12-column grid and responsive containers
- Core components: buttons, cards, navbars, tables
- Spacing, flex, and display utilities
- Breakpoint prefixes (
sm,md,lg) - Customization hooks and when to override defaults
Self-check
- In one sentence, what does “component-based framework” mean?
- Why do we still need solid HTML and CSS fundamentals before leaning on Bootstrap?
Interview prep
- What is Bootstrap in one sentence?
A component-based CSS framework with a responsive grid, prebuilt UI patterns, and optional JavaScript plugins.
- How does this track differ from memorizing getbootstrap.com?
We teach patterns and trade-offs in original copy; official docs are a reference, not the lesson script.