BOOTSTRAP 5 MASTER COURSE

Responsive Web Design, Grid System, UI Components & SCSS: Complete Syllabus

Getting Started & Breakpoints
  • Introduction to Bootstrap 5 & What's New (No jQuery)
  • CDN Integration vs Local Setup (NPM / Yarn)
  • HTML5 Doctype & Responsive Meta Viewport Tag
  • Breakpoints Concept (xs, sm, md, lg, xl, xxl)
  • Container Types (.container, .container-fluid, .container-{breakpoint})
  • Z-index, Display Properties & Responsive Design Strategy
12-Column Grid System & Flexbox
  • Understanding Rows (.row) and Columns (.col-*)
  • Auto-layout & Variable Width Columns
  • Column Alignment (Vertical & Horizontal Alignment)
  • Reordering Columns (order-*) & Offsetting (offset-*)
  • Gutter Management (g-*, gx-*, gy-*)
  • Flexbox Utilities (justify-content, align-items, flex-fill)
Typography, Content & Forms
  • Headings, Display Headings (.display-1 to .display-6) & Lead Text
  • Responsive Images (.img-fluid, .img-thumbnail) & Tables
  • Form Controls, Select Menus, Checks, Radios & Switches
  • Input Groups (.input-group) & Floating Labels (.form-floating)
  • Range Sliders & File Upload Styling
  • Client-side & Server-side Form Validation
Core UI Components
  • Buttons, Button Groups & Outline Styles
  • Cards (Header, Footer, Images, Overlay & Card Groups)
  • Accordions (Flush Accordion & Icons Customization)
  • Alerts (Dismissible Alerts) & Badges
  • Carousel (Slides, Indicators, Controls & Autoplay)
  • Progress Bars, Spinners (Loading) & List Groups
Navigation & Interactive Overlays
  • Navs, Tabs & Pills (.nav-tabs, .nav-pills)
  • Navbar (Brand, Toggler, Collapse & Responsive Themes)
  • Offcanvas (Sidebar Drawer Layouts)
  • Modals (Sizes, Vertically Centered & Scrollable)
  • Tooltips, Popovers & Toasts (JS Initializations)
  • Breadcrumbs & Pagination Control
Utilities, SCSS & Live Projects
  • Spacing Utilities (m-*, p-*), Colors, Borders & Shadows
  • Position Utilities (fixed-top, sticky-top, position-relative)
  • Customizing Bootstrap with Sass / SCSS Variables
  • Bootstrap Utility API Customization ($utilities)
  • Project 1: Responsive E-Commerce / Corporate Landing Page
  • Project 2: Admin Dashboard with Offcanvas & Analytics Grid