Week 13: Bootstrap & Responsive Design

Unit V - Frontend Frameworks

Build beautiful, responsive websites faster!

What You'll Learn

Bootstrap 5 framework fundamentals
Grid system and responsive layout
Pre-built components and utilities
Mobile-first responsive design

The LEGO Analogy

Bootstrap is like a LEGO set for websites. Instead of making every brick from scratch, you get pre-made pieces (components) that snap together to build amazing things quickly. The grid system is like the baseplate that helps you organize your pieces neatly!

Press → or click Next to continue

What is Bootstrap?

Bootstrap Overview

Most popular CSS framework in the world
Created by Twitter (2011)
Open-source and free to use
Current version: Bootstrap 5

What Bootstrap Provides

Grid System: 12-column responsive layout
Components: Buttons, cards, navbars, modals...
Utilities: Spacing, colors, display helpers
JavaScript: Interactive components
Icons: 1,800+ free icons

Getting Started

<!-- Add via CDN (easiest) -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,
        initial-scale=1.0">

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

    <title>My Bootstrap Page</title>
</head>
<body>
    <h1>Hello Bootstrap!</h1>

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

The Bootstrap Grid System

12-Column System

Bootstrap divides the page into 12 equal columns:

1

2

3

4

5

6

7

8

9

10

11

12

Why 12 Columns?

12 is divisible by 2, 3, 4, and 6 - giving maximum layout flexibility!

col-6

col-4

col-3

col-9

Grid Structure

<!-- Container > Row > Columns -->
<div class="container">
    <div class="row">
        <div class="col-6">Half width</div>
        <div class="col-6">Half width</div>
    </div>
    <div class="row">
        <div class="col-4">One third</div>
        <div class="col-4">One third</div>
        <div class="col-4">One third</div>
    </div>
    <div class="row">
        <div class="col-3">Sidebar</div>
        <div class="col-9">Main content</div>
    </div>
</div>

Container Types

.container - Fixed width, centered
.container-fluid - Full width
.container-sm/md/lg - Responsive width

Responsive Breakpoints

Bootstrap uses breakpoints to change layout at different screen sizes:

Breakpoint	Class	Width	Device
Extra small	`col-`	< 576px	Phones (portrait)
Small	`col-sm-`	≥ 576px	Phones (landscape)
Medium	`col-md-`	≥ 768px	Tablets
Large	`col-lg-`	≥ 992px	Laptops
Extra large	`col-xl-`	≥ 1200px	Desktops
XXL	`col-xxl-`	≥ 1400px	Large desktops

Responsive Example

<!-- 1 column on mobile, 2 on tablet, 3 on desktop -->
<div class="row">
    <div class="col-12 col-md-6 col-lg-4">
        Card 1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        Card 2
    </div>
    <div class="col-12 col-md-12 col-lg-4">
        Card 3
    </div>
</div>

Mobile-First Approach

Bootstrap is mobile-first! Classes apply from that breakpoint and up.

col-md-6 means: 6 columns on medium screens and larger. On smaller screens, it defaults to full width (12 columns).

Bootstrap Components

Buttons & Cards

Buttons

<!-- Button styles -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>

<!-- Outline buttons -->
<button class="btn btn-outline-primary">
    Outline
</button>

<!-- Sizes -->
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-sm">Small</button>

<!-- Block button (full width) -->
<div class="d-grid">
    <button class="btn btn-primary">
        Full Width
    </button>
</div>

Cards

<div class="card" style="width: 18rem;">
    <img src="image.jpg"
         class="card-img-top"
         alt="Card image">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">
            Some quick example text.
        </p>
        <a href="#" class="btn btn-primary">
            Read More
        </a>
    </div>
</div>

<!-- Card with header and footer -->
<div class="card">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Content here.</p>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Navbar & Navigation

Responsive Navigation Bar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- Brand -->
        <a class="navbar-brand" href="#">My Website</a>

        <!-- Mobile toggle button -->
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Nav links (collapsible) -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#"
                       data-bs-toggle="dropdown">Services</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Web Design</a></li>
                        <li><a class="dropdown-item" href="#">Development</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Key Points

navbar-expand-lg - Collapses on screens smaller than lg (992px)
navbar-dark bg-dark - Dark theme navbar
ms-auto - Push items to right (margin-start: auto)
Toggle button appears on mobile with hamburger icon

Bootstrap Forms

Form Controls

<form>
    <!-- Text input -->
    <div class="mb-3">
        <label class="form-label">Name</label>
        <input type="text"
               class="form-control"
               placeholder="Enter name">
    </div>

    <!-- Email with help text -->
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email"
               class="form-control">
        <div class="form-text">
            We'll never share your email.
        </div>
    </div>

    <!-- Select dropdown -->
    <div class="mb-3">
        <label class="form-label">Course</label>
        <select class="form-select">
            <option>Choose...</option>
            <option value="1">CSE</option>
            <option value="2">IT</option>
        </select>
    </div>

    <button class="btn btn-primary">
        Submit
    </button>
</form>

Validation States

<!-- Valid state -->
<div class="mb-3">
    <input type="text"
           class="form-control is-valid"
           value="Looks good!">
    <div class="valid-feedback">
        Looks good!
    </div>
</div>

<!-- Invalid state -->
<div class="mb-3">
    <input type="text"
           class="form-control is-invalid">
    <div class="invalid-feedback">
        Please enter a value.
    </div>
</div>

<!-- Floating labels -->
<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>

Form Layout

Use .row and .col classes to create inline form layouts. Combine with .mb-3 for consistent spacing.

Bootstrap Utility Classes

Quick styling without writing custom CSS!

Spacing

Format: {property}{sides}-{size}

<!-- Margin -->
<div class="m-3">Margin all sides</div>
<div class="mt-3">Margin top</div>
<div class="mb-3">Margin bottom</div>
<div class="ms-3">Margin start (left)</div>
<div class="me-3">Margin end (right)</div>
<div class="mx-auto">Center horizontally</div>

<!-- Padding -->
<div class="p-3">Padding all sides</div>
<div class="py-3">Padding Y (top+bottom)</div>
<div class="px-3">Padding X (left+right)</div>

<!-- Sizes: 0, 1, 2, 3, 4, 5 -->
<!-- 0=0, 1=0.25rem, 2=0.5rem,
     3=1rem, 4=1.5rem, 5=3rem -->

Display

<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-flex">Flexbox</div>
<div class="d-inline">Inline</div>
<div class="d-grid">Grid</div>

<!-- Responsive display -->
<div class="d-none d-md-block">
    Hidden on mobile, visible on tablet+
</div>

Colors

<!-- Text colors -->
<p class="text-primary">Blue text</p>
<p class="text-success">Green text</p>
<p class="text-danger">Red text</p>
<p class="text-warning">Yellow text</p>
<p class="text-muted">Gray text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Blue bg</div>
<div class="bg-dark text-white">Dark bg</div>
<div class="bg-light text-dark">Light bg</div>

Text & Alignment

<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>
<p class="text-start">Left aligned</p>
<p class="fw-bold">Bold text</p>
<p class="fst-italic">Italic text</p>
<p class="text-uppercase">uppercase</p>
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-6">Font size 6 (smallest)</p>

Borders & Shadows

<div class="border">All borders</div>
<div class="border-top">Top border</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circle</div>
<div class="shadow">Box shadow</div>
<div class="shadow-lg">Large shadow</div>

Flexbox & Alignment Utilities

Flexbox Classes

<!-- Flex container -->
<div class="d-flex">...</div>

<!-- Direction -->
<div class="d-flex flex-row">...</div>
<div class="d-flex flex-column">...</div>

<!-- Justify content (main axis) -->
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

<!-- Align items (cross axis) -->
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-end">...</div>

<!-- Wrap -->
<div class="d-flex flex-wrap">...</div>

<!-- Gap -->
<div class="d-flex gap-3">...</div>

Common Patterns

Center Everything

<div class="d-flex justify-content-center
            align-items-center"
     style="height: 300px;">
    <p>I am centered!</p>
</div>

Space Between Items

<div class="d-flex justify-content-between">
    <span>Left</span>
    <span>Right</span>
</div>

Responsive Flex Direction

<!-- Column on mobile, row on tablet+ -->
<div class="d-flex flex-column flex-md-row">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Pro Tip

Combine flex utilities with responsive prefixes: justify-content-md-between applies only on medium+ screens.

More Bootstrap Components

Alerts

<div class="alert alert-success">
    Operation successful!
</div>
<div class="alert alert-danger
            alert-dismissible fade show">
    Error occurred!
    <button type="button"
            class="btn-close"
            data-bs-dismiss="alert">
    </button>
</div>

Badges

<span class="badge bg-primary">New</span>
<span class="badge bg-danger">4</span>
<span class="badge rounded-pill bg-success">
    Sale
</span>

List Group

<ul class="list-group">
    <li class="list-group-item active">
        Active item
    </li>
    <li class="list-group-item">
        Second item
    </li>
    <li class="list-group-item
               list-group-item-danger">
        Danger item
    </li>
</ul>

Modal (Popup)

<!-- Trigger button -->
<button class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#myModal">
    Open Modal
</button>

<!-- Modal structure -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Confirm
                </h5>
                <button class="btn-close"
                    data-bs-dismiss="modal">
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary"
                    data-bs-dismiss="modal">
                    Cancel
                </button>
                <button class="btn btn-primary">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>

Responsive Design Principles

Mobile-First Design

Start designing for the smallest screen, then add complexity for larger ones.

Why Mobile-First?

Over 60% of web traffic is mobile
Forces focus on essential content
Better performance on mobile
Easier to add than remove features

The Viewport Meta Tag

<meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">

This is required for responsive design to work!

Responsive Images

<!-- Responsive image -->
<img src="photo.jpg"
     class="img-fluid"
     alt="Responsive image">

<!-- Thumbnail -->
<img src="photo.jpg"
     class="img-thumbnail"
     alt="Thumbnail">

<!-- Rounded -->
<img src="photo.jpg"
     class="rounded-circle"
     alt="Circle image">

Responsive Tables

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Alice</td>
                <td>alice@mail.com</td>
                <td>+91 9876543210</td>
            </tr>
        </tbody>
    </table>
</div>

CampusKart Milestone: Bootstrap Redesign

Deliverable: Responsive CampusKart redesigned with Bootstrap grid, navbar, modals, and cards

What to Build

Bootstrap responsive navbar with hamburger
Product grid: col-md-4, col-sm-6, col-12
Product cards using Bootstrap card component
"Add Product" form inside a Bootstrap modal
Cart summary using Bootstrap offcanvas
Alert messages for success/error

The Comparison

"You wrote 300 lines of custom CSS for layout. Bootstrap does it in 30 class names. But you understand what those class names do because you learned CSS first."

Push to GitHub when done.