IWT Unit 5: Bootstrap 5 Framework & Mobile-First Design

Unit 5 — Bootstrap 5 Framework & Mobile-First Web Engineering

1. Introduction to Bootstrap & Architecture

Bootstrap is the world's most widely used open-source frontend component library and responsive CSS framework. Originally developed by Mark Otto and Jacob Thornton at Twitter, Bootstrap (currently in version 5) enables developers to construct clean, mobile-responsive web interfaces rapidly.

1.1 Core Advantages of Bootstrap 5

1. Mobile-First Philosophy: Styles are built from small screens upward by default using CSS media queries.
2. Standardized 12-Column Grid: Robust, battle-tested layout system based on modern Flexbox.
3. Prebuilt Component Library: Ready-to-use accessible components (Navbars, Modals, Dropdowns, Cards, Carousels).
4. No jQuery Dependency (Bootstrap 5): Re-engineered in pure Vanilla JavaScript, drastically improving bundle size and performance.
5. Cross-Browser Consistency: Built-in CSS Reboot (modernized Normalize.css) smoothing out engine discrepancies between Chrome, Safari, Firefox, and Edge.

1.2 CDN Installation & Setup (W3Schools Standard)

To include Bootstrap 5 without local compilation, link the compiled CSS in <head> and the bundled JavaScript bundle (with Popper.js) before the closing </body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Application</title>

  <!-- Bootstrap 5 CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Page Content -->
  <div class="container py-4">
    <h1 class="text-primary">Hello, Bootstrap 5!</h1>
  </div>

  <!-- Bootstrap 5 JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

---

2. The Bootstrap 12-Column Grid System

The heart of Bootstrap layout is its 12-column responsive flexbox grid. A layout consists of three nested layers:

[ Container (.container or .container-fluid) ]
      |
      +---> [ Row (.row) - provides negative margins ]
                |
                +---> [ Columns (.col-*) - provides padding (gutters) ]

2.1 Container Classes

• .container: Provides a responsive fixed width; changes max-width at each responsive breakpoint.
• .container-fluid: Spans 100% width across all viewports and device sizes.
• Breakpoint containers (.container-sm, .container-md, .container-lg): 100% wide until the specified breakpoint is reached.

2.2 Grid Breakpoints

Breakpoint	Class Infix	Dimensions	Target Devices
Extra Small	(none)	< 576px	Portrait smartphones
Small	sm	≥ 576px	Landscape smartphones
Medium	md	≥ 768px	Tablets
Large	lg	≥ 992px	Laptops / Desktops
Extra Large	xl	≥ 1200px	Large desktop monitors
Extra Extra Large	xxl	≥ 1400px	Ultra-wide displays

2.3 Grid Columns & Arithmetic

The grid accommodates up to 12 columns per row. Numbers assigned to column classes must sum to 12 for a balanced row:

<div class="container">
  <!-- 3 Equal Columns (4 + 4 + 4 = 12) -->
  <div class="row">
    <div class="col-md-4">Column A (33.33%)</div>
    <div class="col-md-4">Column B (33.33%)</div>
    <div class="col-md-4">Column C (33.33%)</div>
  </div>

  <!-- 2 Unequal Columns: Main Content & Sidebar (8 + 4 = 12) -->
  <div class="row mt-4">
    <div class="col-lg-8">Main Article (66.66%)</div>
    <div class="col-lg-4">Sidebar Widget (33.33%)</div>
  </div>

  <!-- Responsive Stacking: Stacks on mobile, 4 columns on desktop -->
  <div class="row mt-4">
    <div class="col-12 col-sm-6 col-lg-3">Feature 1</div>
    <div class="col-12 col-sm-6 col-lg-3">Feature 2</div>
    <div class="col-12 col-sm-6 col-lg-3">Feature 3</div>
    <div class="col-12 col-sm-6 col-lg-3">Feature 4</div>
  </div>
</div>

2.4 Gutters, Offsets & Reordering

• Gutters (.g-*, .gx-*, .gy-*): Control spacing between columns, scaled from 0 to 5 (.g-3 applies $1\text{rem}$ gutter).
• Offsets (.offset-md-3): Shifts a column to the right by introducing left margin.
• Ordering (.order-1, .order-last): Changes visual column order on specific breakpoints without modifying markup.

---

3. Bootstrap Utility Classes & Typography

Bootstrap provides atomic utility classes allowing developers to style elements without writing custom CSS:

3.1 Spacing Utilities (margin & padding)

Format: {property}{sides}-{size} (e.g., mt-3, px-4, mb-auto)

• Properties: m (margin), p (padding).
• Sides: t (top), b (bottom), s (start/left), e (end/right), x (left & right), y (top & bottom), blank (all 4 sides).
• Sizes: 0 (none), 1 ($0.25\text{rem}$), 2 ($0.5\text{rem}$), 3 ($1\text{rem}$), 4 ($1.5\text{rem}$), 5 ($3\text{rem}$), auto.

3.2 Typography & Text Formatting

• Display Headings: .display-1 through .display-6 for expressive, oversized hero typography.
• Lead Text: .lead increases paragraph font-size for introductory summaries.
• Text Alignment: .text-start, .text-center, .text-end, .text-md-start.
• Text Transformations: .text-uppercase, .text-lowercase, .text-capitalize.
• Colors: .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted.
• Backgrounds: .bg-primary, .bg-dark, .bg-light, .bg-transparent.

3.3 Flexbox Utilities

Bootstrap exposes the full power of Flexbox via utility classes:

• .d-flex, .d-inline-flex
• .flex-row, .flex-column, .flex-wrap
• .justify-content-start, .justify-content-center, .justify-content-between
• .align-items-center, .align-items-stretch

---

4. Essential Bootstrap UI Components

4.1 Responsive Navigation Bar (Navbar)

A collapsible header component supporting branding, navigation links, dropdowns, and search forms:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">StudyDump</a>

    <!-- Mobile Hamburger Toggle Button -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Subjects</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Question Banks</a></li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search notes...">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

4.2 Cards

A flexible container for displaying structured content with optional headers, footers, and media:

<div class="card shadow-sm" style="max-width: 320px;">
  <img src="course-cover.jpg" class="card-img-top" alt="Course Cover">
  <div class="card-body">
    <span class="badge bg-primary mb-2">Semester 01</span>
    <h5 class="card-title">Internet &amp; Web Technologies</h5>
    <p class="card-text text-muted">Complete lecture notes, syllabus resources, and CAT exam revision materials.</p>
    <a href="#" class="btn btn-primary w-100">View Subject Hub</a>
  </div>
  <div class="card-footer text-muted small">Updated 2 days ago</div>
</div>

4.3 Buttons & Button Groups

• Variants: .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light.
• Outline variants: .btn-outline-primary.
• Sizing: .btn-lg, .btn-sm.
• State: .active, .disabled.

4.4 Form Controls & Floating Labels

Bootstrap standardizes form styling across all browser engines:

• .form-control on <input> and <textarea>
• .form-select on <select>
• .form-check, .form-check-input, .form-check-label for radios and checkboxes
• .form-floating for modern floating label input patterns:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

4.5 Responsive Tables

• .table: Base table styling with clean horizontal rules.
• .table-striped: Alternating zebra rows.
• .table-hover: Interactive hover highlights on rows.
• .table-bordered: Surrounding borders on all cells.
• .table-responsive: Enclosing wrapper adding horizontal scroll on mobile viewports.

4.6 Interactive Modal Dialog

Modals are overlay windows that sit atop the main page without a full page redirect:

<!-- Trigger Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmModal">
  Open Confirmation
</button>

<!-- Modal Structure -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Confirm Action</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to download the complete IWT study package?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Download Now</button>
      </div>
    </div>
  </div>
</div>

---

5. Mobile-First Best Practices with Bootstrap

1. Always Use Breakpoint Classes Progressive: Start with mobile styles (col-12), then layer tablet (col-md-6), and desktop (col-lg-4). Never write redundant mobile overrides.
2. Minimize Custom CSS Overrides: Use Bootstrap utility classes for spacing, borders, colors, and flexbox alignment before creating custom classes.
3. Ensure Touch Target Ergonomics: Buttons and nav links should maintain at least $44\text{px} \times 44\text{px}$ clickable area for touch devices (py-2 px-3).
4. Leverage CSS Variables for Theming: Bootstrap 5 exposes native CSS variables on :root (--bs-primary, --bs-body-bg), enabling easy custom brand colors and dark mode integration without compiling Sass.

---

6. Unit 5 Review & Exam Revision Checklist

• Grid Math: Calculate column spans across breakpoints (e.g., col-12 col-md-6 col-lg-3).
• Containers: State the difference between .container and .container-fluid.
• Navbar Toggling: Explain data-bs-toggle="collapse" and data-bs-target="#id".
• Modal Architecture: Write the 4 nested classes: .modal $\rightarrow$ .modal-dialog $\rightarrow$ .modal-content $\rightarrow$ .modal-header / .modal-body / .modal-footer.
• Spacing Utility Format: Interpret classes like py-3, mx-auto, mb-4.