Bootstrap

Module 1: Introduction to Bootstrap

• What is Bootstrap?

• Advantages of using Bootstrap

• Setting up Bootstrap (CDN vs. local installation)

• Bootstrap file structure

• Basic Bootstrap template

Module 2: Bootstrap Grid System & Layout

• Understanding the 12-column grid system

• Container types (container, container-fluid)

• Rows and columns (row, col-*)

• Responsive breakpoints (sm, md, lg, xl, xxl)

• Column ordering (order-*)

• Offsetting columns (offset-*)

• Nesting grids

• Gutters (spacing between columns)

Module 3: Bootstrap Utilities & Helpers

Spacing Utilities

• Margin & padding classes (m-*, p-*)

• Responsive spacing (mx-sm-*, py-md-*)

Text & Typography

• Text alignment (text-start, text-center, text-end)

• Text transformation (text-uppercase, text-lowercase)

• Font weight (fw-bold, fw-light)

• Text colors (text-primary, text-success, etc.)

Background & Colors

• Background colors (bg-primary, bg-dark, etc.)

• Gradient backgrounds (bg-gradient)

Display & Visibility

• Display properties (d-block, d-flex, d-none)

• Responsive visibility (d-md-none, d-lg-block)

Flexbox Utilities

• Flex direction (flex-row, flex-column)

• Justify content (justify-content-start, justify-content-between)

• Align items (align-items-start, align-items-center)

Borders & Shadows

• Border classes (border, border-top, border-danger)

• Border radius (rounded, rounded-circle)

• Shadows (shadow-sm, shadow-lg)

Module 4: Bootstrap Components

Buttons & Button Groups

• Button styles (btn-primary, btn-outline-secondary)

• Button sizes (btn-sm, btn-lg)

• Disabled buttons

• Button groups (btn-group, btn-toolbar)

Navbar & Navigation

• Basic navbar structure

• Navbar color schemes (navbar-dark, navbar-light)

• Responsive navbar (toggle button for mobile)

• Navs & tabs (nav-tabs, nav-pills)

Cards

• Card structure (card, card-body, card-title)

• Card images (card-img-top)

• Card groups & decks

Forms

• Form controls (form-control, form-select)

• Form validation (is-valid, is-invalid)

• Input groups (input-group, input-group-text)

• Floating labels

Alerts, Badges & Progress Bars

• Alert styles (alert-success, alert-warning)

• Dismissible alerts

• Badges (badge bg-primary)

• Progress bars (progress-bar)

Breadcrumbs, Pagination & List Groups

• Breadcrumb navigation

• Pagination (pagination, page-item)

• List groups (list-group, list-group-item)

Modals, Tooltips & Popovers

• Modal dialogs (modal, modal-dialog)

• Tooltips (data-bs-toggle="tooltip")

• Popovers (data-bs-toggle="popover")

Carousel & Dropdowns

• Image carousel (carousel, carousel-item)

• Dropdown menus (dropdown, dropdown-menu)

Module 5: Advanced Bootstrap Features

Customizing Bootstrap

• Using Sass variables to customize Bootstrap

• Theme colors & fonts

• Creating a custom build

Bootstrap Icons

• Installing Bootstrap Icons

• Using icons in buttons, navbars, etc.

Bootstrap & JavaScript

• Bootstrap’s JavaScript components

• Using data attributes (data-bs-toggle, data-bs-target)

• Modal events (show.bs.modal, hidden.bs.modal)

Module 6: Bootstrap Best Practices & Projects

• Mobile-first approach

• Accessibility considerations

• Performance optimization

• Project 1: Portfolio Website

• Project 2: E-commerce Product Page

• Project 3: Admin Dashboard