BootstrapWorkshop

A complete, structured collection of notes from my Bootstrap learning sessions (1–6). Covers fundamentals to advanced components — setup with Node.js, CDN, Bootstrap utilities, layout system, forms, modals, offcanvas, carousels, dropdowns, navbar, grid system, and more. Perfect for quick revision, interview prep, and frontend practice.

Bootstrap Full Course - Practice (Sessions 1–6)

This repository contains well-structured, time-stamped notes from my complete Bootstrap learning sessions.
The content covers everything from installation to advanced UI components, making it a perfect reference for revision and real-world UI development.

---

📌 Sessions Covered

• Session 1: Introduction to Bootstrap, Component Library, Environment Setup
• Session 2: Bootstrap Foundations, Utility Classes, Layout Basics
• Session 3: Text Utilities, Buttons, Forms, Input Groups, Alerts
• Session 4: Modals, Offcanvas, Carousel
• Session 5: Collapse, Accordion, Dropdowns, Navs & Tabs, Navbar
• Session 6: Cards, Badges, Pagination, Tables, Spinners, Grid System

---

🧩 Session-Wise Breakdown

🎯 Session 1 – Introduction & Setup

• What Bootstrap is, why it's used, and how it speeds UI development
• Bootstrap as a component library (HTML + CSS + JavaScript)
• Comparison with Tailwind, Toric, MUI, DevExpress
• Understanding Bootstrap 3/4 vs latest Bootstrap 5
• Installing Node.js & npm
• Installing VS Code + useful extensions
• Setting up project folder structure
• Installing Bootstrap, jQuery, Popper, Bootstrap Icons via npm
• Understanding node_modules & package.json
• Creating index.html & linking Bootstrap CSS/JS
• Using Bootstrap Icons (bi bi-person-fill etc.)

---

🎯 Session 2 – Bootstrap Fundamentals

• Installing Bootstrap using npm and CDN
• What is a CDN? Benefits & drawbacks
• CSS Utilities
  • Containers: container, container-sm, container-fluid, etc.
  • Margin Utilities: m, mt, mb, ms, me, mx, my
  • Padding Utilities: p, pt, pb, ps, pe, px, py
  • Borders & Radius: border, border-1-4, rounded, rounded-circle, rounded-pill
  • Width/Height: w-25, w-50, w-100, h-25, h-100
  • Colors: bg-primary, text-danger etc.
  • Positioning: position-relative, top-0, start-0, etc.
  • Display/Flex: d-flex, justify-content-center, align-items-center
  • Text Alignment: text-center, text-end

---

🎯 Session 3 – Text, Buttons, Forms

• Text styling: h1-h6, fs-1 to fs-6, bold/italic/underline
• Text transformation: uppercase, lowercase, capitalize
• Button styles
  • btn, btn-primary, btn-outline-success, sizes (btn-sm, btn-lg)
  • Button groups & toolbars
• Forms
  • form-control, form-label, form-select, form-check-input, form-switch
  • Sliders via form-range
• Input Groups
  • Combined input + button
  • Search bar design
• Alerts
  • alert, alert-dismissible, data-bs-dismiss

---

🎯 Session 4 – Modals, Offcanvas, Carousel

• Modals: Structure + attributes
  • modal, modal-dialog, modal-content
  • modal-header, modal-body, modal-footer
  • data-bs-toggle, data-bs-target, data-bs-dismiss
  • fullscreen, centered, scrollable mods
• Offcanvas:
  • offcanvas-start, offcanvas-end, offcanvas-top, offcanvas-bottom
  • offcanvas-header, offcanvas-body
• Carousel:
  • carousel-inner, carousel-item, active
  • Slide & fade animations
  • Carousel controls (prev/next buttons)
  • Indicators (dots)
  • Timing with data-bs-interval

---

🎯 Session 5 – Collapse, Accordion, Dropdown, Navs, Navbar

• Collapse:
  • collapse, show, data-bs-target
• Accordion:
  • accordion, accordion-item, accordion-header, accordion-body
  • data-bs-parent (mutex behavior)
• Dropdowns:
  • dropdown, dropdown-menu, dropdown-item
  • Dropup / dropend / dropstart
  • Dropdowns with icons, checkboxes
• Navs & Tabs:
  • nav, nav-tabs, nav-pills, tab-content, tab-pane
• Navbar:
  • navbar, navbar-brand, navbar-toggler, navbar-collapse
  • Responsive navigation (navbar-expand-lg)

---

🎯 Session 6 – Components & Grid System

• Cards: Title, body, footer, images
• Badges: With buttons, headings
• Pagination: pagination, page-item, page-link
• Progress Bars: progress, progress-bar, striped, animated
• Spinners: spinner-border, spinner-grow
• Tables: table, table-striped, table-hover, table-dark
• Breadcrumbs: Navigation path UI
• Grid System:
  • row, col, col-sm, col-md, col-lg
  • Responsive layout examples