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 this workshop, you will build a complete, responsive site 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-4
.col-4
.col-sm-6
.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
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
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
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
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
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. Basic JavaScript

Enhance your Bootstrap sites with interactivity using vanilla JavaScript.

5.1 Perform JavaScript Basics

DOM Manipulation
Hello World

JavaScript allows you to change content and styles dynamically:

JSconst btn = document.getElementById('btn');
const text = document.getElementById('text');

btn.addEventListener('click', function() {
    text.innerText = "JavaScript is awesome!";
    text.className = "text-success display-6 fw-bold";
});

5.2 Interactive Web Elements

Bootstrap components often require JavaScript for dynamic behavior (e.g. Modals, Toasts, Tooltips).

Toast Notification
Use bootstrap.Toast to control toasts programmatically. 
JS// Initialize Toast
const toastTrigger = document.getElementById('liveToastBtn');
const toastLiveExample = document.getElementById('liveToast');

if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample);
    toast.show();
  });
}

5.3 Form Validation

Bootstrap provides validation styles that can be triggered via JavaScript.

Validation Logic
Looks good!
Please enter your name.
Please provide a valid email.
You must agree before submitting.

This script intercepts the submit event and applies validation classes:

JS// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation-new')

// Loop over them and prevent submission
Array.from(forms).forEach(form => {
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }

    form.classList.add('was-validated')
  }, false)
})

06. Examples

Explore the examples created during the workshop.

Workshop Examples

Check out the collection of responsive web layouts and components built with Bootstrap.

View Examples