Module Overview

Bootstrap Fundamentals

A 1-day workshop to master responsive web design using the world's most popular CSS framework.

Goal

By the end of the day, you will build a complete, responsive landing page using Bootstrap 5 without writing complex custom CSS.

Analogy

Bootstrap is like pre-made LEGO blocks. Instead of molding every brick (CSS) yourself, you focus on assembling them to build the structure.

Why Bootstrap?

See the difference in effort required to build a standard button.

Vanilla CSS

Required Code:

CSS.my-button {
  background-color: #0d6efd;
  color: white;
  border: none;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.my-button:hover {
  background-color: #0b5ed7;
}

Bootstrap

Required Code:

Pre-built hover effects & accessibility included

HTML<button class="btn btn-primary">
  Click Me
</button>

01. Setup & Basic Structure

Bootstrap 5 requires no jQuery. The easiest way to get started is via CDN.

Step 1: The Starter Template

HTML<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Bootstrap Page</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Containers

Containers are the most basic layout element in Bootstrap and are required when using the grid system.

.container

Fixed width container. Snap to breakpoints (e.g. 540px, 720px).

.container-fluid

Full width container. Spans the entire width of the viewport (100%).

02. Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

The Golden Rule: Rows .row must be placed within a .container (or fluid). Columns .col-* must be placed within rows.

.col-4

.col-sm-6

Breakpoint Classes

Class	Screen Width	Device
.col-	< 576px	Mobile (Portrait)
.col-sm-	≥ 576px	Mobile (Landscape)
.col-md-	≥ 768px	Tablet
.col-lg-	≥ 992px	Desktop

Practice

Activity: Product Catalogue

Test your understanding of the Grid System by creating a responsive product grid.

Challenge

Create a layout displaying 6 products with different columns based on screen size:

Mobile: 1 product per row (stack vertically)
Tablet: 2 products per row
Desktop: 3 products per row

Hint

Use col-12 (mobile), col-md-6 (tablet), and col-lg-4 (desktop) on each product item.

Starter Code:

HTML<div class="container">
  <div class="row g-4">
    <!-- Product Item -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="border p-5 text-center bg-light">Product 1</div>
    </div>
    
    <!-- Repeat for 5 more products... -->
  </div>
</div>

Real World Example:

Headphones

$99

Smart Watch

$199

+ 4 more...

HTML<div class="col-12 col-md-6 col-lg-4">
  <div class="card h-100">
    <img src="product.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Product Name</h5>
      <p class="card-text">Description...</p>
      <a href="#" class="btn btn-primary">Buy Now</a>
    </div>
  </div>
</div>

03. Common UI Components

Buttons

HTML<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-info">Outline</button>

Cards

Card Title

Some quick example text to build on the card title.

Go somewhere

HTML<div class="card">
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

Modals

Click the button below to launch a demo modal.

Requires data-bs-toggle="modal" and data-bs-target="#ID".

HTML<!-- Trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">
  Launch
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

04. Forms & Layouts

Bootstrap provides a wide range of form controls with powerful layout options.

Form Controls

Email address

Example textarea

File input

Color picker

HTML<div class="mb-3">
  <label class="form-label">Email address</label>
  <input type="email" class="form-control" placeholder="...">
</div>
<div class="mb-3">
  <label class="form-label">Example textarea</label>
  <textarea class="form-control" rows="3"></textarea>
</div>

Select & Checks

Select Menu

Checks & Radios

Default checkbox

Default radio

Switch checkbox input

Range

HTML<select class="form-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
</select>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1">
  <label class="form-check-label" for="check1">
    Default checkbox
  </label>
</div>

Input Groups

@example.com

$ .00

HTML<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Floating Labels

Email address

Password

HTML<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

Example Registration Form

Create Account

First name

Looks good!

Last name

Looks good!

Username

Please choose a username.

City

Please provide a valid city.

State

Please select a valid state.

Zip

Please provide a valid zip.

Agree to terms and conditions

You must agree before submitting.

Already have an account? Log in

Form Layout: Use the Grid System (.row, .col-*) directly inside your form to create complex layouts. Input groups and validation states help improve user experience.

Form Structure:

HTML<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">First name</label>
    <input type="text" class="form-control" required>
  </div>
  <div class="col-md-6">
    <label class="form-label">Last name</label>
    <input type="text" class="form-control" required>
  </div>
  
  <!-- Full width on mobile, 3 columns on desktop -->
  <div class="col-md-3">
    <label class="form-label">State</label>
    <select class="form-select">...</select>
  </div>

  <div class="col-12">
     <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

05. Mini Project: Landing Page

Now it's time to put it all together.

Project Requirements

Navbar: Responsive, with links.
Hero Section: Big heading, subtext, call-to-action button.
Features: 3-column grid using Cards.
Contact Form: Input fields for name, email, message.
Footer: Copyright info.

Challenge

Try to use only Bootstrap Utility classes (e.g., bg-dark, text-center, p-5) to style the page before writing any custom CSS.

Starter Code

Copy this structure to start

HTML<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Landing Page</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<header class="text-center py-5 bg-light">
  <div class="container py-5">
    <h1 class="display-4 fw-bold">Your Product Name</h1>
    <p class="lead text-muted mb-4">A short description of your amazing product.</p>
    <a href="#" class="btn btn-primary btn-lg">Get Started</a>
  </div>
</header>

<!-- Features Section -->
<section id="features" class="py-5">
  <div class="container">
    <div class="row g-4">
      <!-- Feature 1 -->
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body text-center">
            <i class="bi bi-speedometer2 fs-1 text-primary mb-3"></i>
            <h5>Fast Performance</h5>
            <p>Description of feature.</p>
          </div>
        </div>
      </div>
      <!-- Add more features... -->
    </div>
  </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-5 bg-light">
  <div class="container" style="max-width: 600px;">
    <h2 class="text-center mb-4">Contact Us</h2>
    <form>
      <!-- Your form code here... -->
    </form>
  </div>
</section>

<!-- Footer -->
<footer class="py-4 bg-dark text-white text-center">
  <div class="container">
    <small>© 2024 Landing Page. All rights reserved.</small>
  </div>
</footer>