Bootstrap Fundamentals

Introduction to Bootstrap

Bootstrap is the world's most popular front-end component library for building responsive, mobile-first websites and applications. Originally created by Twitter in 2011, it has evolved into a comprehensive toolkit that provides ready-to-use components, a powerful grid system, and extensive utilities—all designed to speed up development and ensure consistency across projects.

graph TD A[Bootstrap 5] -->|Core Components| B[Layout] A -->|Core Components| C[Content] A -->|Core Components| D[Forms] A -->|Core Components| E[Components] A -->|Core Components| F[Helpers] A -->|Core Components| G[Utilities] B --> B1[Grid System] B --> B2[Containers] B --> B3[Breakpoints] C --> C1[Typography] C --> C2[Images] C --> C3[Tables] C --> C4[Figures] D --> D1[Form Controls] D --> D2[Select] D --> D3[Checks & Radios] D --> D4[Range] D --> D5[Validation] E --> E1[Navbar] E --> E2[Cards] E --> E3[Buttons] E --> E4[Modal] E --> E5[And many more...] F --> F1[Clearfix] F --> F2[Color & Background] F --> F3[Position] F --> F4[Visually hidden] F --> F5[Stretched link] G --> G1[Borders] G --> G2[Colors] G --> G3[Display] G --> G4[Flex] G --> G5[And many more...]

Bootstrap 5: What's New?

Bootstrap 5 (the current major version) introduced several significant changes from Bootstrap 4:

Dropped jQuery dependency in favor of vanilla JavaScript
Improved customization with CSS variables
Enhanced grid system with new breakpoint
Refreshed form elements and validation
New utility classes and components
RTL (right-to-left) support
Improved documentation and examples

Analogy: Bootstrap as a Furniture Kit

Think of Bootstrap as a furniture kit from IKEA. Like IKEA furniture:

It comes pre-designed with standard dimensions and aesthetics
Assembly is straightforward and follows consistent patterns
It's modular, allowing you to pick and choose what you need
The pieces are designed to work together harmoniously
You can customize it (paint it, add your own hardware) but within certain constraints
It's recognizable — many websites "look like Bootstrap" just as many apartments have that "IKEA look"

Getting Started with Bootstrap

Including Bootstrap in Your Project

There are several ways to include Bootstrap in your project. Here are the most common methods:

Method 1: CDN (Content Delivery Network)

The simplest way to include Bootstrap is using the CDN links in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Example</title>
  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Your content here -->
  
  <!-- Bootstrap Bundle with Popper (for JavaScript components) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Method 2: npm (Node Package Manager)

For projects using a build system:

# Install Bootstrap
npm install bootstrap

# In your JavaScript file (e.g., app.js)
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Method 3: Download and Include Locally

Download the compiled CSS and JS files from the Bootstrap website and include them in your project:

<!-- Local Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Local Bootstrap Bundle JS -->
<script src="js/bootstrap.bundle.min.js"></script>

Method 4: Package Managers (not just npm)

# Using yarn
yarn add bootstrap

# Using pnpm
pnpm add bootstrap

# Using Composer (PHP)
composer require twbs/bootstrap:5.3.0

Bootstrap Starter Template

Here's a complete starter template for a Bootstrap project:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Starter Template</title>
  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Optional: Add your custom CSS file after Bootstrap CSS -->
  <link href="css/custom.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <h1>Hello, Bootstrap!</h1>
        <p class="lead">This is a simple example of a Bootstrap page.</p>
        <p>Bootstrap includes dozens of components and utilities for building responsive websites.</p>
        <button class="btn btn-primary">Learn More</button>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Sidebar</h5>
            <p class="card-text">This is a simple sidebar widget using Bootstrap cards.</p>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-light py-3 mt-5">
    <div class="container text-center">
      <p class="mb-0">© 2025 My Website</p>
    </div>
  </footer>

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- Optional: Add your custom JavaScript file after Bootstrap JS -->
  <script src="js/custom.js"></script>
</body>
</html>

The Bootstrap Grid System

The Grid System is one of Bootstrap's most powerful features. It allows you to create responsive layouts using a series of containers, rows, and columns.

Grid System Fundamentals

Bootstrap's grid system is built on a 12-column layout with six responsive breakpoints:

Breakpoint	Class Prefix	Dimension	Container Width
Extra small	`xs` / no prefix	<576px	100%
Small	`sm`	≥576px	540px
Medium	`md`	≥768px	720px
Large	`lg`	≥992px	960px
Extra large	`xl`	≥1200px	1140px
Extra extra large	`xxl`	≥1400px	1320px

Grid System Components

graph TD A[Bootstrap Grid] --> B[Containers] A --> C[Rows] A --> D[Columns] B --> B1[".container
(fixed width)"] B --> B2[".container-fluid
(full width)"] B --> B3[".container-{breakpoint}
(responsive)"] C --> C1[".row"] C --> C2[".row-cols-*
(equal-width)"] D --> D1[".col-*
(specific size)"] D --> D2[".col
(auto-layout)"] D --> D3[".col-{breakpoint}-*
(responsive)"]

Basic Grid Example

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- This takes up 6 columns (half the width) on medium and larger screens -->
      Column 1
    </div>
    <div class="col-md-6">
      <!-- This takes up 6 columns (half the width) on medium and larger screens -->
      Column 2
    </div>
  </div>
</div>

Responsive Grid Example

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on small, half width on medium, one-third on large -->
      Column 1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on small, half width on medium, one-third on large -->
      Column 2
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      <!-- Full width on small and medium, one-third on large -->
      Column 3
    </div>
  </div>
</div>

Advanced Grid Features

Auto-Layout Columns

<div class="container">
  <div class="row">
    <div class="col">Equal Width Column</div>
    <div class="col">Equal Width Column</div>
    <div class="col">Equal Width Column</div>
  </div>
</div>

Column Ordering

<div class="container">
  <div class="row">
    <div class="col-md-4 order-md-2">Visually second on medium screens</div>
    <div class="col-md-4 order-md-3">Visually third on medium screens</div>
    <div class="col-md-4 order-md-1">Visually first on medium screens</div>
  </div>
</div>

Offsetting Columns

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4 offset-md-4">Column 2 (with offset)</div>
  </div>
</div>

Nesting Columns

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Main Column
      <div class="row">
        <div class="col-md-6">Nested Column 1</div>
        <div class="col-md-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-md-6">Another Main Column</div>
  </div>
</div>

Real-World Example: Event Website Layout

Here's how you might structure a responsive event website using the Bootstrap grid:

<div class="container">
  <!-- Hero Section -->
  <div class="row mb-5">
    <div class="col-12">
      <div class="hero-banner p-5 text-center bg-primary text-white rounded">
        <h1>Annual Tech Conference 2025</h1>
        <p class="lead">Join us for three days of innovation and networking</p>
        <button class="btn btn-light">Register Now</button>
      </div>
    </div>
  </div>
  
  <!-- Featured Speakers Section -->
  <div class="row mb-4">
    <div class="col-12">
      <h2 class="text-center mb-4">Featured Speakers</h2>
    </div>
  </div>
  
  <div class="row mb-5">
    <!-- On mobile: stack vertically (full width) -->
    <!-- On tablet: 2 speakers per row -->
    <!-- On desktop: 4 speakers per row -->
    <div class="col-12 col-md-6 col-lg-3 mb-4">
      <div class="card">
        <img src="speaker1.jpg" class="card-img-top" alt="Speaker 1">
        <div class="card-body">
          <h5 class="card-title">Jane Doe</h5>
          <p class="card-text">AI Research Lead, TechCorp</p>
        </div>
      </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-4">
      <!-- Speaker 2 Card -->
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-4">
      <!-- Speaker 3 Card -->
    </div>
    
    <div class="col-12 col-md-6 col-lg-3 mb-4">
      <!-- Speaker 4 Card -->
    </div>
  </div>
  
  <!-- Schedule & Location Section -->
  <div class="row">
    <!-- Schedule on the left (or top on mobile) -->
    <div class="col-12 col-lg-8 mb-4">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          <h3 class="mb-0">Event Schedule</h3>
        </div>
        <div class="card-body">
          <!-- Schedule content -->
        </div>
      </div>
    </div>
    
    <!-- Location on the right (or bottom on mobile) -->
    <div class="col-12 col-lg-4 mb-4">
      <div class="card">
        <div class="card-header bg-info text-white">
          <h3 class="mb-0">Event Location</h3>
        </div>
        <div class="card-body">
          <!-- Location details -->
        </div>
      </div>
    </div>
  </div>
</div>

Essential Bootstrap Components

Bootstrap includes dozens of reusable components that you can use to build your interface. Here are some of the most commonly used components:

Navbar

The navbar is one of the most important navigation components:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</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>
    
    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </li>
      </ul>
      
      <!-- Right-aligned search form -->
      <form class="d-flex ms-auto">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Cards

Cards are flexible content containers for displaying a wide variety of content:

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

Buttons

Bootstrap has a variety of button styles and sizes:

<!-- Button styles -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

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

<!-- Button sizes -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Standard button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Forms

Bootstrap provides extensive form styling and validation:

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  
  <div class="col-md-6">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" required>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  
  <div class="col-md-12">
    <label for="validationCustomUsername" class="form-label">Email</label>
    <div class="input-group has-validation">
      <span class="input-group-text" id="inputGroupPrepend">@</span>
      <input type="email" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
      <div class="invalid-feedback">
        Please enter a valid email.
      </div>
    </div>
  </div>
  
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

<script>
// Example starter JavaScript for form validation
(function () {
  'use strict'

  // Fetch all forms to apply validation styles to
  var forms = document.querySelectorAll('.needs-validation')

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

      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

Modal

Modals are dialog boxes/popups that can be used to display content or collect user input:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Alerts

Alerts provide contextual feedback messages:

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>

<!-- Alert with dismiss button -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Bootstrap Utility Classes

Bootstrap provides a comprehensive set of utility classes that allow you to modify elements without writing custom CSS. These are particularly useful for making small adjustments to spacing, text, colors, and more.

Spacing Utilities

Bootstrap includes utilities for setting margin and padding:

<!-- Format: {property}{sides}-{size} -->
<!-- Property: m (margin), p (padding) -->
<!-- Sides: t (top), b (bottom), s (start), e (end), x (horizontal), y (vertical), blank (all sides) -->
<!-- Size: 0-5 (0 to 3rem), auto -->

<!-- Examples -->
<div class="mt-3">Margin top 1rem</div>
<div class="p-5">Padding 3rem all around</div>
<div class="mx-auto">Horizontally centered with automatic margins</div>
<div class="py-2">Padding top and bottom 0.5rem</div>
<div class="mb-4">Margin bottom 1.5rem</div>

Text Utilities

Classes for text alignment, weight, style, and more:

<!-- Text alignment -->
<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>

<!-- Text wrapping -->
<p class="text-nowrap">No wrap text.</p>
<p class="text-break">Text with breaking long words if needed.</p>

<!-- Text transformation -->
<p class="text-lowercase">LOWERCASED TEXT.</p>
<p class="text-uppercase">uppercased text.</p>
<p class="text-capitalize">capitalized text.</p>

<!-- Font weight and italics -->
<p class="fw-bold">Bold text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fst-italic">Italic text.</p>

Color Utilities

Bootstrap includes utility classes for text and background colors:

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info">Info background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>
<div class="bg-white">White background</div>
<div class="bg-transparent">Transparent background</div>

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>
<p class="text-white bg-dark">White text</p>

Display Utilities

Control when elements display and how:

<!-- Display property -->
<div class="d-inline">d-inline</div>
<div class="d-inline">d-inline</div>
<div class="d-block">d-block</div>
<div class="d-flex">d-flex</div>
<div class="d-none">d-none (hidden)</div>
<div class="d-none d-md-block">Hidden on small screens, visible on medium and up</div>
<div class="d-block d-md-none">Visible on small screens, hidden on medium and up</div>

Flex Utilities

Bootstrap includes a robust set of flexbox utilities:

<!-- Enable flex container -->
<div class="d-flex">
  <!-- Flex direction -->
  <div class="flex-row">...</div>
  <div class="flex-column">...</div>
  
  <!-- Justify content (horizontal alignment) -->
  <div class="justify-content-start">...</div>
  <div class="justify-content-center">...</div>
  <div class="justify-content-end">...</div>
  <div class="justify-content-between">...</div>
  <div class="justify-content-around">...</div>
  
  <!-- Align items (vertical alignment) -->
  <div class="align-items-start">...</div>
  <div class="align-items-center">...</div>
  <div class="align-items-end">...</div>
  
  <!-- For flex items -->
  <div class="flex-grow-1">...</div>
  <div class="flex-shrink-0">...</div>
  <div class="align-self-center">...</div>
</div>

Position Utilities

Control element positioning:

<!-- Position -->
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

<!-- Arrange elements -->
<div class="position-relative">
  <div class="position-absolute top-0 start-0">Top left</div>
  <div class="position-absolute top-0 end-0">Top right</div>
  <div class="position-absolute bottom-0 start-0">Bottom left</div>
  <div class="position-absolute bottom-0 end-0">Bottom right</div>
  <div class="position-absolute top-50 start-50 translate-middle">Center</div>
</div>

The Bootstrap JavaScript Components

Bootstrap includes several JavaScript components that enhance interactivity. In Bootstrap 5, these components no longer require jQuery and work with vanilla JavaScript.

Initialize Individual Components

// Initialize a modal
const myModal = new bootstrap.Modal(document.getElementById('myModal'));

// Show the modal
myModal.show();

// Hide the modal
myModal.hide();

// Toggle a collapse element
const myCollapse = new bootstrap.Collapse(document.getElementById('myCollapse'));
myCollapse.toggle();

Initialize All Components

// Initialize all tooltips on a page
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Common JavaScript Components

Dropdowns: Toggle contextual overlays for displaying lists of links
Modals: Dialog boxes/popups for displaying content
Tooltips: Small pop-up boxes that appear when hovering over an element
Popovers: Similar to tooltips but can contain more content
Collapse: Toggle the visibility of content
Carousel: Slideshow for cycling through elements
Toasts: Lightweight notifications
Scrollspy: Automatically update navigation based on scroll position
Tabs: Create tabbable regions

Data Attributes

Bootstrap's JavaScript components can be used without writing any JavaScript, using data attributes in your HTML:

<!-- Toggle modal without JavaScript -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch modal
</button>

<!-- Tooltip without JavaScript -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<!-- Collapse without JavaScript -->
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component.
  </div>
</div>

Practice Activities

Responsive Grid Layout: Create a responsive page layout with a header, sidebar, main content area, and footer using the Bootstrap grid system. The sidebar should collapse below the main content on small screens.
Navigation Bar Design: Build a navigation bar with a dropdown menu, a search form, and a responsive toggle that collapses on mobile devices. Include proper accessibility attributes.
Card-Based Gallery: Create a responsive image gallery using Bootstrap cards with appropriate spacing. The gallery should display 1 card per row on extra small devices, 2 on small, 3 on medium, and 4 on large screens.
Form Validation: Build a registration form with Bootstrap form components and add client-side validation using Bootstrap's validation classes and JavaScript.
Interactive Components: Create a page that demonstrates at least three different Bootstrap JavaScript components (e.g., modal, tooltip, collapse) working together in a meaningful way.

Additional Resources

Bootstrap 5 Official Documentation
Bootstrap Examples - Official examples of common UI patterns
Material Design for Bootstrap - Bootstrap with Material Design
Bootswatch - Free themes for Bootstrap
Bootstrap Icons - Official icon library
Bootsnipp - Design elements and code snippets for Bootstrap
Bootstrap Tutorial by Tutorial Republic

Key Takeaways

Bootstrap is a comprehensive front-end framework for building responsive, mobile-first websites
Bootstrap 5 no longer requires jQuery and uses vanilla JavaScript for interactive components
The Bootstrap grid system is based on a 12-column layout with six responsive breakpoints
Bootstrap provides pre-styled components for common UI elements like navbars, cards, and forms
Utility classes allow for quick styling adjustments without writing custom CSS
JavaScript components add interactivity and can be initialized using data attributes or JavaScript
Bootstrap can be included via CDN, npm, or downloaded files, depending on your project needs

Next Lecture

In our next session, we'll explore Tailwind CSS, a utility-first CSS framework that offers a different approach to web styling. We'll learn about its philosophy, how to set it up, and how to effectively use its utility classes to build modern interfaces.