Track
bootstrap
Bootstrap
36 lessons: 12-column grid, components, forms, JS plugins, theming, admin capstone—Bootstrap 5.3 CDN in every playground.
- Mode
- iframe_html
- Practice
- HTML preview sandbox
- Lessons
- 36 units
Before you start
Bootstrap—a component and utility CSS framework: grid system, prebuilt buttons, navbars, forms, and responsive helpers.
Still everywhere in admin panels, legacy sites, and fast MVPs—maintainers need the grid, components, and customization hooks.
Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.
36 iframe lessons with Bootstrap 5.3 CDN (CSS + bundle JS), hands-on challenges, interview prep, and 108 MCQs—patterns, not copied vendor docs.
After HTML & CSS fundamentals; parallel or after utility-first tracks if you learn both workflow styles.
Lesson order
Sequential — follow top to bottom36 lessons are live in this track. Start from step 01 for the smoothest path.
-
01 intro Introduction to Bootstrap
beginner
Open → -
02 what-is-bootstrap What is Bootstrap?
beginner
Open → -
03 component-mindset The component mindset
beginner
Open → -
04 how-bootstrap-works How Bootstrap works under the hood
intermediate
Open → -
05 playground-workflow Playground workflow
beginner
Open → -
06 grid-system The 12-column grid system
beginner
Open → -
07 containers Containers and max-width
beginner
Open → -
08 columns-rows Columns, rows, and nesting
intermediate
Open → -
09 flex-utilities Flex utilities
intermediate
Open → -
10 spacing-utilities Spacing utilities
beginner
Open → -
11 layout-patterns Common layout patterns
intermediate
Open → -
12 buttons Buttons and button groups
beginner
Open → -
13 alerts-badges Alerts and badges
beginner
Open → -
14 cards Cards
beginner
Open → -
15 navbar Navbars
intermediate
Open → -
16 list-group List groups
beginner
Open → -
17 tables Tables
beginner
Open → -
18 breakpoints-grid Breakpoints and the grid
intermediate
Open → -
19 responsive-utilities Responsive spacing and flex
intermediate
Open → -
20 display-visibility Display and visibility
intermediate
Open → -
21 stacks-columns Stacks and vertical rhythm
beginner
Open → -
22 images-figures Responsive images and figures
beginner
Open → -
23 form-controls Form controls
intermediate
Open → -
24 form-layout Form layout
intermediate
Open → -
25 validation-states Validation states
intermediate
Open → -
26 input-groups Input groups
intermediate
Open → -
27 dropdowns Dropdowns
intermediate
Open → -
28 collapse-accordion Collapse and accordion
intermediate
Open → -
29 modals-toasts Modals and toasts
intermediate
Open → -
30 offcanvas Offcanvas panels
intermediate
Open → -
31 color-modes Color modes (light / dark)
advanced
Open → -
32 customize-theme Customize the theme
advanced
Open → -
33 capstone-admin Capstone: admin dashboard shell
advanced
Open → -
34 interview-essentials Interview essentials
advanced
Open → -
35 production-checklist Production build checklist
advanced
Open → -
36 summary Track summary
beginner
Open →