Bootstrap
Beginner
The world’s most popular front-end toolkit. Master the 12-column responsive flexbox grid, accessible UI components, Sass customization engine, Utilities API, dark mode, and enterprise design systems.
0 / 40 lessons
Lessons
40
Complete to finish this stage
Est. time
24.1h
At a comfortable pace
Difficulty
Beginner
For complete beginners
Why Bootstrap Matters
Bootstrap delivers an exhaustive 12-column responsive flexbox grid, an extensive suite of accessible pre-styled components, and a modular Sass design token architecture. With modern vanilla JavaScript (zero jQuery dependencies), runtime CSS custom properties, and first-class color mode theming (data-bs-theme="dark"), Bootstrap empowers developers to build production-grade, enterprise-scale web applications with incredible speed and rock-solid cross-browser reliability.
Curriculum Overview
This master curriculum spans 3 difficulty tiers across 40 comprehensive lessons:
- Level 1 — Beginner (Lessons 1–12): Bootstrap Fundamentals & Setup (Philosophy, vs Traditional CSS/Tailwind, CDN, npm, Vite, React, Vue, Angular), Containers & Responsive Wrappers, The 12-Column Grid System (Rows, Columns, Offsets, Ordering, Gutters), Breakpoints & Mobile-First Design (
xstoxxl), Typography & Display Headings, Color System & Subtle Backgrounds, Spacing Utilities (0–5 scale, Gap, Negative margins), Flexbox Utilities & Alignment, Core UI Components (Buttons, Cards, Alerts, Badges, Breadcrumbs, Pagination, Progress, Tables, Figures), Forms & Client-Side Validation, Interactive JavaScript Components (Modals, Dropdowns, Collapse, Accordions, Tabs, Tooltips, Toasts, Offcanvas), and 7 Beginner UI Labs. - Level 2 — Intermediate (Lessons 13–27): Advanced Grid Layouts & Auto-Layout, Advanced Responsive Utilities & Display Control, Positioning & Z-Index Coordinates, Sizing & Viewport Units (
min-vh-100), Borders, Radius, Shadows & Opacity, Advanced Navigation & Custom Modals, Advanced Forms with Floating Labels, Advanced Data Tables & Alignment, The Bootstrap Utilities API ($utilitiesmap), Sass Customization & Variable Overrides, Bootstrap Icons Integration, JavaScript API & Programmatic Control, Web Accessibility (a11y) & WCAG Compliance, Framework Integration (React-Bootstrap, BootstrapVue, ng-bootstrap), and 7 Intermediate Projects. - Level 3 — Advanced (Lessons 28–40): Bootstrap Internal Architecture & Source Code Engine, Deep Bootstrap Customization & Design Overrides, Advanced Sass Architecture & Build Optimization, Design Systems & Token Synchronization with Figma, Theming & 0ms Runtime Dark Mode Switching, Advanced Responsive Engineering & Container Queries, Modern CSS Standards (Cascade Layers
@layer,:has(), Logical Properties), Performance Engineering & PurgeCSS Bundle Minimization (<25KB), Enterprise Component Libraries & Storybook, Enterprise Monorepo Governance, Advanced Accessibility (Roving Tabindex & High-Contrast Mode), Production Quality CI/CD Pipelines, and 3 Senior Capstone Projects (Enterprise Design System, Cloud Dashboard, Multi-Theme SaaS).
Start learning
Stage progress0%
Bootstrap lessons
40 lessons · follow them in order for best results.
Bootstrap Fundamentals, Installation & SetupMaster core Bootstrap 5 fundamentals: library philosophy, traditional CSS vs Bootstrap vs Tailwind, installation workflows (CDN, npm, Vite, React, Vue, Angular), and directory file structure.Beginner 30 min Level 1 — BeginnerContainers & Responsive Layout WrappersMaster Bootstrap 5 containers: fixed .container, fluid .container-fluid, responsive breakpoint containers (.container-sm to .container-xxl), gutter mechanics, and nested container rules.Beginner 25 min Level 1 — BeginnerThe 12-Column Grid SystemMaster the Bootstrap 5 12-column flexbox grid: rows, columns, auto-layout, column sizing, responsive breakpoint prefixes, offsets, ordering, nested grids, and gutter controls.Beginner 35 min Level 1 — BeginnerBreakpoints & Mobile-First Responsive DesignMaster Bootstrap 5 responsive breakpoints: xs, sm, md, lg, xl, xxl, the mobile-first min-width media query philosophy, and responsive utility class mechanics.Beginner 25 min Level 1 — BeginnerTypography, Text Utilities & HeadingsMaster Bootstrap 5 typography: standard headings, display headings, lead paragraphs, text transformation, font weight utilities, text alignment, wrapping, and truncation.Beginner 25 min Level 1 — BeginnerColor System, Theme Palettes & Background UtilitiesMaster Bootstrap 5 contextual colors: primary, secondary, success, danger, warning, info, light, dark, body colors, background utilities, text colors, and subtle variants.Beginner 25 min Level 1 — BeginnerSpacing Utilities: Margin, Padding & GapMaster Bootstrap 5 spacing utilities: margin (m-*, mx-*, my-*), padding (p-*, px-*, py-*), the 0-5 scale, negative margins, flex/grid gap utilities, and responsive spacing.Beginner 25 min Level 1 — BeginnerFlexbox Utilities & AlignmentMaster Bootstrap 5 Flexbox utilities: d-flex, direction, justify-content, align-items, align-self, flex-wrap, flex-grow/shrink, auto margins, and gap alignment.Beginner 30 min Level 1 — BeginnerCore UI Components: Buttons, Cards, Alerts & BadgesMaster Bootstrap 5 core CSS components: buttons, button groups, cards, alerts, badges, breadcrumbs, pagination, progress bars, list groups, tables, images, and figures.Beginner 35 min Level 1 — BeginnerForms, Controls, Input Groups & ValidationMaster Bootstrap 5 forms: form controls, labels, input fields, textareas, selects, checkboxes, radio buttons, range sliders, input groups, and client-side form validation.Beginner 35 min Level 1 — BeginnerInteractive JavaScript ComponentsMaster Bootstrap 5 JavaScript components: dropdowns, modals, collapse, accordions, dynamic tabs, tooltips, popovers, image carousels, toasts, and offcanvas drawers.Beginner 40 min Level 1 — BeginnerBeginner Projects & Real-World UI LabsBuild 7 practical real-world beginner Bootstrap 5 projects: SaaS landing page, developer portfolio, tech blog, auth login/register UI, product details, e-commerce homepage, and admin dashboard.Beginner 45 min Level 1 — BeginnerAdvanced Grid Layouts & Custom Grid BehaviorMaster advanced Bootstrap 5 grid techniques: complex multi-column responsive patterns, nested rows, dynamic column ordering, auto-layout distribution, equal-height cards, responsive gutters, and custom CSS grid integration.Intermediate 35 min Level 2 — IntermediateAdvanced Responsive Utilities & Display ControlMaster Bootstrap 5 responsive utilities: dynamic display toggling, responsive flexbox direction, fluid responsive typography, responsive positioning, and visibility control.Intermediate 30 min Level 2 — IntermediatePositioning, Coordinates & Stacking ContextMaster Bootstrap 5 positioning utilities: static, relative, absolute, fixed, sticky, edge coordinates (top, start, bottom, end), translation offsets, and z-index layers.Intermediate 25 min Level 2 — IntermediateSizing Utilities & Viewport ConstraintsMaster Bootstrap 5 sizing utilities: fractional widths (w-25 to w-100, w-auto), fractional heights (h-25 to h-100, h-auto), and viewport constraints (min-vw, min-vh, max-vw, max-vh).Intermediate 25 min Level 2 — IntermediateBorders, Radius, Shadows, Opacity & OverflowMaster Bootstrap 5 visual styling utilities: border width and subtraction, contextual border colors, border radius scales, pill/circle shaping, box shadows, opacity scales, and overflow control.Intermediate 30 min Level 2 — IntermediateAdvanced Navigation, Modals & Dynamic UIMaster advanced Bootstrap 5 components: complex responsive navbars, custom dropdown alignments, scrollable/fullscreen modals, multi-placement offcanvas drawers, dynamic tabs, and toast stacking.Intermediate 40 min Level 2 — IntermediateAdvanced Forms, Floating Labels & Custom ValidationMaster advanced Bootstrap 5 forms: floating labels (form-floating), compound input groups, horizontal grid forms, custom validation scripts, accessible form error handling, and disabled states.Intermediate 35 min Level 2 — IntermediateAdvanced Tables & Data PresentationMaster Bootstrap 5 tables: responsive tables (table-responsive-*), zebra striping (table-striped), column striping, hover effects, bordered/borderless tables, vertical alignment, and nested cell utilities.Intermediate 30 min Level 2 — IntermediateThe Bootstrap Utilities APIMaster the Bootstrap 5 Utilities API: Sass $utilities map structure, creating custom utilities (cursor, filter, z-index), modifying existing utilities, responsive generation, and pseudo-class states (hover, focus).Intermediate 35 min Level 2 — IntermediateSass Fundamentals & Customizing Bootstrap SassMaster customizing Bootstrap 5 via Sass: Sass variables, maps, mixins, functions, overriding !default flags, custom theme color maps, import order mechanics, and partial lightweight builds.Intermediate 40 min Level 2 — IntermediateBootstrap Icons & Visual Asset IntegrationMaster Bootstrap Icons: font icons, SVG sprites, inline SVGs, installation via npm/CDN, sizing utilities, contextual colors, button integration, and navigation iconography.Intermediate 25 min Level 2 — IntermediateBootstrap JavaScript API & Programmatic ControlMaster Bootstrap 5 JavaScript architecture: programmatic APIs, class constructors, getOrCreateInstance(), component lifecycle events (shown, hidden), async methods, and dynamic instance management.Intermediate 35 min Level 2 — IntermediateWeb Accessibility (a11y) & WCAG Compliance in BootstrapMaster Bootstrap 5 web accessibility: semantic HTML, ARIA attributes, keyboard navigation traps, focus restoration in modals, accessible forms, color contrast (WCAG AA), screen-reader helpers (visually-hidden), and reduced motion.Intermediate 35 min Level 2 — IntermediateFramework Integration: React, Vue & AngularMaster integrating Bootstrap 5 into modern JavaScript frameworks: React (react-bootstrap, controlled modals), Vue 3 (bootstrap-vue-next, reactive directives), and Angular 18/19 (ng-bootstrap, component architecture).Intermediate 40 min Level 2 — IntermediateIntermediate Projects & Full-Featured ApplicationsBuild 7 advanced intermediate Bootstrap 5 projects: responsive e-commerce storefront with offcanvas cart, SaaS analytics dashboard, CRM data portal, admin control panel, modern blog platform, multi-page business website, and custom component library.Intermediate 50 min Level 2 — IntermediateBootstrap Internal Architecture & Source Code EngineMaster the internal engine of Bootstrap 5: source repository architecture, CSS/Sass modular compilation pipelines, CSS custom properties (--bs-*), design tokens, component architecture, and responsive mixin generators.Advanced 45 min Level 3 — AdvancedDeep Bootstrap Customization & Design OverridesMaster deep Bootstrap 5 customization: bespoke brand color palettes, custom typography systems with RFS (Responsive Font Sizing), custom spacing scales, breakpoint tuning, bespoke components, and runtime CSS variable overrides.Advanced 45 min Level 3 — AdvancedAdvanced Sass Architecture & Build OptimizationMaster advanced Sass architecture for enterprise Bootstrap: selective modular imports, custom build compilation pipelines with Dart Sass/Vite, tree-shaking unused styles, and minimizing production CSS payloads.Advanced 40 min Level 3 — AdvancedDesign Systems & Token Architecture with BootstrapMaster building enterprise design systems with Bootstrap 5: design token synchronization from Figma (Style Dictionary), semantic color tokens, component variant matrices, dark mode tokens, and multi-brand white-label architecture.Advanced 45 min Level 3 — AdvancedTheming, Dark Mode & Runtime Theme SwitchingMaster Bootstrap 5.3+ color mode engine: data-bs-theme="dark", runtime 0ms theme switching, custom color modes (sepia, navy), CSS variable cascades, system preference detection, and FOUT prevention.Advanced 35 min Level 3 — AdvancedAdvanced Responsive Engineering & Modern LayoutsMaster advanced responsive engineering in Bootstrap 5: CSS Container Queries (@container), fluid layouts with CSS clamp(), combining Flexbox Grid with native CSS Grid, multi-tier responsive strategies, and mobile-first architectural patterns.Advanced 40 min Level 3 — AdvancedModern CSS Standards & Bootstrap ModernizationMaster modern CSS standards in Bootstrap: CSS custom properties (var(--bs-*)), native CSS nesting, cascade layers (@layer), the relational :has() pseudo-class, math functions (calc, clamp, min, max), and CSS logical properties.Advanced 40 min Level 3 — AdvancedPerformance Engineering & CSS OptimizationMaster Bootstrap 5 performance engineering: CSS bundle size reduction, PurgeCSS / UnCSS dead-code elimination, critical CSS inlining for sub-second FCP, Popper.js tree-shaking, and asset delivery optimization.Advanced 40 min Level 3 — AdvancedEnterprise Component Libraries & StorybookMaster building enterprise reusable component libraries with Bootstrap 5: component API contracts, variant props, Storybook documentation, automated visual regression testing, unit testing with Vitest/Testing Library, and npm packaging.Advanced 45 min Level 3 — AdvancedEnterprise Bootstrap Governance & Monorepo ScaleMaster enterprise-scale Bootstrap architecture: monorepo integration (Turborepo/Nx), shared theme packages, component ownership governance, version management, migration strategies, and breaking change protocols.Advanced 40 min Level 3 — AdvancedAdvanced Accessibility (a11y) & WCAG ComplianceMaster enterprise-level web accessibility with Bootstrap 5: WCAG 2.2 AA/AAA compliance checklists, roving tabindex keyboard navigation, screen-reader testing workflows (VoiceOver, NVDA), high-contrast mode adaptations, and focus restoration.Advanced 45 min Level 3 — AdvancedProduction Quality, Testing & CI/CD PipelinesMaster enterprise production quality for Bootstrap applications: cross-browser testing matrices, automated visual regression (Playwright/Percy), Stylelint CSS linting, Lighthouse performance benchmarking, and GitHub Actions CI/CD workflows.Advanced 40 min Level 3 — AdvancedEnterprise Capstone Projects & Senior Career RoadmapBuild 3 advanced enterprise capstone projects: Enterprise Design System with Storybook & npm packaging, Enterprise Cloud Analytics Dashboard, and Multi-Theme SaaS Platform with 0ms runtime switching and CI/CD pipelines.Advanced 60 min Level 3 — Advanced