Part 1: The Core Grid & Layout
Topics
- What is Bootstrap 5 (No jQuery dependence)
- Setup: CDN vs Local vs NPM
- Understanding Breakpoints (sm, md, lg, xl, xxl)
- ADDED Vite + Bootstrap Setup
- Folder structure & Linking
Practice
- Setup a project using CDN
- Install via NPM and import CSS
Outcome: Configure Bootstrap in any project.
Topics
- Containers (Fluid vs Fixed)
- Rows & Columns (
col-*)
- Nesting Columns
- Offsetting & Reordering
- ADDED
row-cols-* classes
- Gutters (gx, gy, g-0)
Practice
- Build a responsive 3-column layout
- Create a complex dashboard grid
Outcome: Master responsive layouts.
Topics
- Typography (Display headings, lead)
- Colors & Backgrounds (Text, Bg, Gradient)
- Spacing Utilities (m-*, p-*, mx-auto)
- Borders & Radius
- ADDED Stretched Link
- ADDED Text Truncation
Practice
- Design a hero section using utilities
- Style typography without custom CSS
Outcome: Style faster with utilities.
Part 2: Components Mastery
Topics
- Buttons & Button Groups
- Cards (Image, Body, Footer)
- Badges & Alerts
- Progress Bars & Spinners
- List Groups
Practice
- Create a product card with badges
- Build a user profile widget
Outcome: Build common UI elements.
Topics
- Navbar (Brand, Toggler, Collapse)
- Navs & Tabs
- Pagination & Breadcrumbs
- Responsive Behavior
- ADDED Offcanvas Navbar (Mobile)
Practice
- Build a responsive sticky navbar
- Create a tabbed content section
Outcome: Create seamless navigation.
Topics
- Form Controls (Input, Textarea)
- Select, Checks, Radios, Switches
- Input Groups & Floating Labels
- Validation Styles (Valid/Invalid)
- Range Inputs
Practice
- Create a Login/Signup Modal form
- Build a checkout form with validation
Outcome: Build accessible, styled forms.
Part 3: Advanced & Modern
Topics
- Modals (Popups)
- Carousel (Sliders)
- Accordion (Collapse)
- Tooltips & Popovers
- Toasts (Notifications)
- ADDED Offcanvas Sidebar
Practice
- Create an image slider
- Build a sidebar navigation
Outcome: Add interactivity without custom JS.
Topics (Updated)
- ADDED Dark Mode (Color Modes)
- ADDED
data-bs-theme="dark"
- ADDED CSS Grid (Bootstrap's Native Grid)
- ADDED RFS (Responsive Font Sizes)
- ADDED Bootstrap Icons Library
Practice
- Implement a Dark/Light theme toggle
- Use CSS Grid instead of Flex Grid
Outcome: Use bleeding-edge Bootstrap features.
Topics
- Why SASS with Bootstrap?
- Overriding Variables (Colors, Fonts)
- Adding Custom Colors to Map
- ADDED Utility API (Create own classes)
- Compiling SASS to CSS
Practice
- Create a custom branded theme
- Generate new utility classes
Outcome: Customize Bootstrap like a Pro.
Project Options
- Portfolio Website: Hero, Skills, Projects, Contact
- Admin Dashboard: Sidebar, Charts, Tables, Cards
- E-commerce Homepage: Navbar, Carousel, Product Grid
Requirements
- Fully Responsive
- Custom SASS Theme
- Dark Mode Support
Outcome: Deployment Ready Portfolio.
Topics
- Bootstrap + AOS (Scroll Animations)
- Bootstrap with React/Vue (Overview)
- Converting Figma Design to Bootstrap
- Accessibility (ARIA standards)