Complete Bootstrap Tutorial

Master Bootstrap — build responsive, mobile-first websites rapidly.

Getting Started with Bootstrap: Setup Guide

Learn to set up Bootstrap and create your first responsive project

What is Bootstrap?

Bootstrap is a powerful CSS framework for building responsive, mobile-first websites quickly. It provides pre-built components, utilities, and a grid system.

Installation Methods

CDN Link (Fastest Way)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>Hello Bootstrap!</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

NPM Installation

Install via Package Manager
npm install bootstrap
Import in JavaScript
// app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Viewport Meta Tag

Essential for Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1">

Your First Bootstrap Page

Complete Starter Template
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Starter</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <span class="navbar-brand">My Site</span>
    </div>
  </nav>

  <main class="container mt-4">
    <h1>Welcome to Bootstrap</h1>
    <p class="lead">Build responsive websites faster.</p>
    <button class="btn btn-primary">Learn More</button>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Practice Tasks
  • Create a Bootstrap page using CDN links.
  • Add a navbar, hero section, and call-to-action button.
  • Include the viewport meta tag for mobile responsiveness.
  • Test responsiveness by resizing your browser.

Key Takeaways

  • Bootstrap is loaded via CDN or npm.
  • Always include the viewport meta tag.
  • Bundle includes both CSS and JavaScript components.
  • Container provides responsive max-width layout.

What's Next?

Next Topic: Explore Bootstrap Introduction to understand core concepts.

Bootstrap Introduction: Core Concepts

Understand Bootstrap's philosophy and design principles

Mobile-First Approach

Bootstrap starts with mobile styles and scales up to larger screens. This ensures optimal experience on all devices.

Mobile-First CSS
/* Mobile styles first (smallest screen) */
.card {
  margin-bottom: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

/* Desktop and up */
@media (min-width: 1200px) {
  .card {
    padding: 2rem;
  }
}

Bootstrap's Core Components

CategoryExamples
LayoutGrid, Containers, Breakpoints
ContentTypography, Images, Tables
ComponentsButtons, Cards, Navbars, Modals
UtilitiesSpacing, Colors, Display, Flexbox

Breakpoints

Responsive Breakpoints
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  <!-- Full width on mobile, half on tablet, 1/3 on desktop, 1/4 on large -->
</div>

<!-- Breakpoint Names: xs (0), sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px) -->

Utility-First Approach

Building with Utilities
<!-- Instead of custom CSS, use utility classes -->
<div class="p-4 bg-primary text-white rounded shadow">
  Styled with utilities
</div>

<!-- Margins, padding, colors, borders all via classes -->
<button class="btn btn-success ms-2 px-4">Click Me</button>
Practice Tasks
  • Create a grid layout that changes at different breakpoints.
  • Use utility classes to style a card component.
  • Understand mobile-first design philosophy.
  • Identify when to use components vs utilities.

Key Takeaways

  • Bootstrap is mobile-first, scaling up to larger screens.
  • Use breakpoints for responsive design.
  • Utility classes provide quick styling without custom CSS.
  • Components combine HTML, CSS, and JavaScript.

What's Next?

Next Topic: Learn Bootstrap History and evolution.

Bootstrap History: Evolution of a Framework

Understand Bootstrap's journey from Twitter to modern web development

Origins and Early Days

2010: Created at Twitter by Mark Otto and Jacob Thornton as an internal tool to improve consistency and speed of web development.

Major Versions

VersionYearKey Features
Bootstrap 12011Initial grid system, basic components
Bootstrap 22012Responsive design, 12-column grid
Bootstrap 32013Mobile-first approach, flat design
Bootstrap 42018Flexbox, Sass variables, improved utilities
Bootstrap 52021Dropped jQuery, modern CSS, custom properties

Modern Bootstrap (v5+)

Bootstrap 5 Improvements
✓ No jQuery dependency
✓ CSS Custom Properties (CSS Variables)
✓ Improved Sass customization
✓ RTL support
✓ Better accessibility
✓ Enhanced spacing system
✓ Modern browser support (dropped IE11)

Bootstrap's Impact

Bootstrap revolutionized web development by making responsive design accessible to everyone. Today it powers millions of websites and is one of the most popular CSS frameworks.

Practice Tasks
  • Research Bootstrap's current version and features.
  • Compare Bootstrap 4 and Bootstrap 5 differences.
  • Understand why jQuery was removed in v5.

Key Takeaways

  • Bootstrap started at Twitter in 2010.
  • Version 3 introduced mobile-first design.
  • Version 5 removed jQuery and modernized the codebase.
  • Bootstrap is widely used and actively maintained.

What's Next?

Next Topic: Master the Grid System, Bootstrap's foundation.

Grid System: Build Responsive Layouts

Master Bootstrap's 12-column flexible grid for any layout

How the Grid Works

Bootstrap's grid divides the page into 12 equal columns. You specify how many columns each element should span at different screen sizes.

Basic Grid Structure

Container and Rows
<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

<!-- Each col takes equal width (4 columns each) -->

Responsive Column Sizing

Specify Columns at Breakpoints
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      <!-- Full width on mobile (col-12)
           Half on tablet (col-sm-6)
           1/3 on desktop (col-md-4)
           1/4 on large (col-lg-3) -->
    </div>
  </div>
</div>

Breakpoint Reference

BreakpointClass InfixDimensions
Extra smallNone< 576px
Smallsm≥ 576px
Mediummd≥ 768px
Largelg≥ 992px
Extra largexl≥ 1200px
Extra extra largexxl≥ 1400px

Container Variants

Fixed vs Fluid Containers
<!-- Fixed width container -->
<div class="container">Max 1320px wide</div>

<!-- Full width container -->
<div class="container-fluid">100% width</div>

<!-- Responsive breakpoint containers -->
<div class="container-sm"></div>  <!-- 540px at sm -->
<div class="container-md"></div>  <!-- 720px at md -->
<div class="container-lg"></div>  <!-- 960px at lg -->

Column Offset and Order

Position and Reorder Columns
<!-- Offset (push columns right) -->
<div class="row">
  <div class="col-md-4 offset-md-2">Shifted right by 2 columns</div>
</div>

<!-- Reorder with order classes -->
<div class="row">
  <div class="col order-md-2">Appears second on desktop</div>
  <div class="col order-md-1">Appears first on desktop</div>
</div>
Practice Tasks
  • Create a 3-column layout that stacks on mobile.
  • Build a card grid that's responsive at different breakpoints.
  • Use column offsets to center content.
  • Test your layout at various screen sizes.

Key Takeaways

  • Grid has 12 columns; combine with breakpoints for responsiveness.
  • Container wraps rows; rows contain columns.
  • Use col-{breakpoint}-{width} for responsive sizing.
  • Offset and order classes provide advanced positioning.

What's Next?

Next Topic: Learn Flexbox Utilities for flexible layouts.

Layout Containers: Page Structure

Master Bootstrap containers for proper page layout

Container Types

Containers are the most basic layout element. Choose between fixed width or fluid width containers.

Fixed and Fluid Containers

Container Variants
<!-- Fixed width container -->
<div class="container">
  <!-- Content stays centered with max-width -->
</div>

<!-- Fluid container (full width) -->
<div class="container-fluid">
  <!-- Content takes full width -->
</div>

<!-- Breakpoint-specific containers -->
<div class="container-sm">SM and above</div>
<div class="container-md">MD and above</div>
<div class="container-lg">LG and above</div>
<div class="container-xl">XL and above</div>
<div class="container-xxl">XXL and above</div>

Container Padding and Gutters

Horizontal Gutters in Containers
<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

<!-- Custom gutter with g-* -->
<div class="row g-3">
  <div class="col-md-6">Column 1</div>
  <div class="col-md-6">Column 2</div>
</div>

<!-- No gutters -->
<div class="row g-0">
  <div class="col-md-6">Column 1</div>
  <div class="col-md-6">Column 2</div>
</div>

Nesting Containers

Nested Grids
<div class="container">
  <div class="row">
    <div class="col-md-9">
      <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-3">Sidebar</div>
  </div>
</div>

Responsive Containers

Container Behavior at Breakpoints
<!-- Container changes at breakpoints -->
<div class="container">
  <table class="table table-sm">
    <tr>
      <th>Breakpoint</th>
      <th>Class</th>
      <th>Max Width</th>
    </tr>
    <tr><td>Extra small</td><td>None</td><td>100%</td></tr>
    <tr><td>Small</td><td>sm</td><td>540px</td></tr>
    <tr><td>Medium</td><td>md</td><td>720px</td></tr>
  </table>
</div>
Practice Tasks
  • Create a fixed-width container layout.
  • Build a fluid-width full-screen layout.
  • Create a multi-column layout with gutters.
  • Build a nested grid structure.

Key Takeaways

  • Use .container for fixed-width centered layout.
  • Use .container-fluid for full-width layout.
  • Control gutters with .g-* classes.
  • Nest grids with rows inside columns.

What's Next?

Next Topic: Learn Dropdowns for dropdown menus.

Typography: Text and Headings

Master text styling and typography in Bootstrap

Headings

Bootstrap provides clear heading styles from h1 to h6, with optional .display classes for larger displays.

Heading Styles

HTML Headings and Display Classes
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

<!-- Display headings (larger) -->
<div class="display-1">Display 1</div>
<div class="display-2">Display 2</div>
<div class="display-3">Display 3</div>
<div class="display-4">Display 4</div>
<div class="display-5">Display 5</div>
<div class="display-6">Display 6</div>

Paragraph and Text Styling

Text Alignment and Styling
<!-- 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 transformation -->
<p class="text-lowercase">Lowercase text</p>
<p class="text-uppercase">Uppercase text</p>
<p class="text-capitalize">Capitalized text</p>

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

Text Colors and Emphasis

Text Color Classes
<!-- 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-muted">Muted text</p>

<!-- Emphasis elements -->
<strong>Strong text</strong>
<em>Emphasize text</em>
<mark>Highlighted text</mark>

Blockquotes and Lists

Blockquotes and Lists
<!-- Blockquote -->
<blockquote class="blockquote">
  <p>A famous quote</p>
  <footer class="blockquote-footer">Someone famous</footer>
</blockquote>

<!-- Unstyled list -->
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Inline list -->
<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
</ul>
Practice Tasks
  • Create a page with different heading levels.
  • Apply text alignment and transformation classes.
  • Use different text colors for emphasis.
  • Style lists with Bootstrap typography classes.

Key Takeaways

  • Use display-1 to display-6 for large headings.
  • Apply text-alignment classes for alignment.
  • Use fw-bold, fst-italic for font styling.
  • Apply text-{color} classes for colored text.

What's Next?

Next Topic: Learn Colors and Utilities for styling.

Colors and Utilities: Essential Styling

Master Bootstrap's color system and utility classes

Color System

Bootstrap provides a comprehensive color system with primary, secondary, success, danger, warning, info, light, and dark colors.

Background and Text Colors

Background and Text Color Classes
<!-- Background colors -->
<div class="bg-primary p-2">Primary background</div>
<div class="bg-secondary p-2">Secondary background</div>
<div class="bg-success p-2">Success background</div>
<div class="bg-danger text-white p-2">Danger background</div>

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>

Borders and Shadows

Border and Shadow Utilities
<!-- Borders -->
<div class="border p-2">With border</div>
<div class="border border-primary p-2">Primary border</div>
<div class="border border-danger border-5 p-2">Thick border</div>

<!-- Rounded corners -->
<div class="rounded p-2">Slightly rounded</div>
<div class="rounded-3 p-2">Very rounded</div>
<div class="rounded-pill p-2">Pill shaped</div>

<!-- Shadows -->
<div class="shadow p-3">Shadow</div>
<div class="shadow-lg p-3">Large shadow</div>

Opacity and Transparency

Opacity Classes
<div class="bg-primary bg-opacity-25 p-3">25% opacity</div>
<div class="bg-primary bg-opacity-50 p-3">50% opacity</div>
<div class="bg-primary bg-opacity-75 p-3">75% opacity</div>
<div class="bg-primary bg-opacity-100 p-3">100% opacity</div>

Display and Visibility

Display and Visibility Utilities
<!-- Display -->
<div class="d-none">Hidden</div>
<div class="d-block">Block display</div>
<div class="d-inline">Inline display</div>
<div class="d-flex">Flex display</div>

<!-- Visibility (still takes space) -->
<div class="invisible">Invisible but space taken</div>
Practice Tasks
  • Create colored boxes with background and border colors.
  • Apply rounded corners and shadows to elements.
  • Use opacity utilities on colored backgrounds.
  • Hide/show elements with display utilities.

Key Takeaways

  • Use bg-{color} for background and text-{color} for text.
  • Apply border with border or border-{color}.
  • Use rounded, rounded-3, rounded-pill for corners.
  • Add shadow and shadow-lg for depth.

What's Next?

Next Topic: Learn Utilities and Spacing for alignment.

Buttons: Interactive Components

Style and customize buttons for any use case

Button Variants

Color Variants
<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>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Button Sizes

Large, Normal, Small Buttons
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Normal button</button>
<button class="btn btn-primary btn-sm">Small button</button>

Button Styles

Solid vs Outline
<!-- Solid -->
<button class="btn btn-primary">Solid</button>

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

<!-- Disabled -->
<button class="btn btn-primary" disabled>Disabled</button>

Button Groups and States

Grouped Buttons and Loading States
<!-- Button group -->
<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

<!-- Loading state -->
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>
Practice Tasks
  • Create buttons in all variants and colors.
  • Add different sizes and states.
  • Build a button group for navigation.
  • Style a button with an icon.

Key Takeaways

  • Use btn with a color class (btn-primary, btn-success, etc.).
  • Outline styles with btn-outline-{color}.
  • Sizes available: btn-lg and btn-sm.
  • Add disabled attribute for inactive buttons.

What's Next?

Next Topic: Learn Forms for user input.

Forms: Collecting User Input

Build beautiful, accessible forms with Bootstrap

Form Groups and Labels

Basic Form Structure
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>

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

Form Control Types

Textarea, Select, and Checkboxes
<!-- Textarea -->
<textarea class="form-control" rows="3"></textarea>

<!-- Select -->
<select class="form-select">
  <option>Choose option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Checkbox -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="agree">
  <label class="form-check-label" for="agree">
    I agree
  </label>
</div>

<!-- Radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="choice" id="choice1">
  <label class="form-check-label" for="choice1">
    Option 1
  </label>
</div>

Form Validation

Validation States
<!-- Valid input -->
<input type="text" class="form-control is-valid" value="Valid input">

<!-- Invalid input -->
<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">This field is required</div>

<!-- Feedback messages -->
<div class="valid-feedback">Looks good!</div>

Horizontal Forms

Labels and Inputs Side by Side
<form>
  <div class="row mb-3">
    <label for="input" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="input">
    </div>
  </div>
</form>
Practice Tasks
  • Build a login form with email and password fields.
  • Create a multi-field form with various input types.
  • Add validation feedback and error messages.
  • Create a horizontal form with labels aligned.

Key Takeaways

  • Use form-control class for inputs and textareas.
  • Wrap groups in form-group or use mb-3 for spacing.
  • Add is-valid or is-invalid for validation states.
  • Use form-check for checkboxes and radios.

What's Next?

Next Topic: Learn Cards for flexible content containers.

Tables: Data Display

Style and customize tables for data presentation

Table Basics

Bootstrap provides table styles for responsive and accessible data display with multiple options for styling.

Basic Table

Simple Table Structure
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

Table Variants

Striped, Bordered, and Hover Effects
<!-- Striped table -->
<table class="table table-striped">
  <!-- content -->
</table>

<!-- Bordered table -->
<table class="table table-bordered">
  <!-- content -->
</table>

<!-- Hover effect -->
<table class="table table-hover">
  <!-- content -->
</table>

<!-- Dark table -->
<table class="table table-dark">
  <!-- content -->
</table>

<!-- Combination -->
<table class="table table-striped table-hover">
  <!-- content -->
</table>

Table Row Coloring

Contextual Row Colors
<table class="table">
  <tbody>
    <tr class="table-active">
      <td>Active</td>
    </tr>
    <tr class="table-primary">
      <td>Primary</td>
    </tr>
    <tr class="table-secondary">
      <td>Secondary</td>
    </tr>
    <tr class="table-success">
      <td>Success</td>
    </tr>
    <tr class="table-danger">
      <td>Danger</td>
    </tr>
    <tr class="table-warning">
      <td>Warning</td>
    </tr>
  </tbody>
</table>

Responsive Tables

Mobile-Friendly Tables
<!-- Scroll horizontally on mobile -->
<div class="table-responsive">
  <table class="table">
    <!-- content -->
  </table>
</div>

<!-- Breakpoint-specific responsive -->
<div class="table-responsive-md">
  <table class="table">
    <!-- content -->
  </table>
</div>

<!-- Table sizes -->
<table class="table table-sm">Smaller</table>
Practice Tasks
  • Create a basic table with headers and data.
  • Apply striped, bordered, and hover effects.
  • Use contextual row colors for different states.
  • Make table responsive for mobile devices.

Key Takeaways

  • Use .table class for basic styling.
  • Add .table-striped, .table-bordered, .table-hover for effects.
  • Use .table-{color} classes for row colors.
  • Wrap with .table-responsive for mobile scrolling.

What's Next?

Next Topic: Learn Icons for visual indicators.

Cards: Content Containers

Use cards to organize content in flexible, responsive containers

Card Structure

Cards are flexible content containers with multiple variants, built with flexbox. They support headers, footers, images, and more.

Basic Card

Simple Card with Title and Body
<div class="card">
  <div class="card-header">
    Card Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
  <div class="card-footer">
    Card Footer
  </div>
</div>

Card with Image

Card with Top Image and Overlay
<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Description text</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with image overlay -->
<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Text</h5>
  </div>
</div>

Card Columns and Groups

Multiple Cards in Grid
<div class="row">
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Card 1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card">
      <div class="card-body">Card 2</div>
    </div>
  </div>
</div>

Card Styling

Colored Cards and Borders
<!-- Colored cards -->
<div class="card bg-primary text-white">
  <div class="card-body">Primary card</div>
</div>

<!-- Bordered card -->
<div class="card border-success">
  <div class="card-body">Success border</div>
</div>
Practice Tasks
  • Build a product card with image and description.
  • Create a card grid layout (3-4 cards).
  • Style cards with different colors and borders.
  • Create a card with overlay text.

Key Takeaways

  • Use .card class as container with .card-body for content.
  • Add .card-header and .card-footer for additional sections.
  • Use .card-img-top for top images and .card-img-overlay for overlays.
  • Combine cards with grid system for responsive layouts.

What's Next?

Next Topic: Learn Navbar and Navigation for site navigation.

Alerts and Badges: Notifications

Display important messages and status indicators

Alerts

Alerts provide contextual feedback messages for typical user actions with helpful information.

Alert Variants

Different Alert Colors
<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-secondary">Secondary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-warning">Warning alert</div>
<div class="alert alert-info">Info alert</div>
<div class="alert alert-light">Light alert</div>
<div class="alert alert-dark">Dark alert</div>

Alert with Links and Dismissible

Interactive Alerts
<!-- Alert with link -->
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>.
</div>

<!-- Dismissible alert -->
<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"></button>
</div>

Badges

Badge Styles and Variants
<!-- Basic badges -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>

<!-- Pill badges -->
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-success">Success</span>

<!-- Positioned badge -->
<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

Badges in Headings

Using Badges with Text
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>

<!-- Badge in list -->
<button type="button" class="btn btn-primary">
  Messages <span class="badge text-bg-secondary">4</span>
</button>
Practice Tasks
  • Create alerts in all color variants.
  • Add dismissible close button to alerts.
  • Create badges in different sizes and styles.
  • Position badges on buttons and headings.

Key Takeaways

  • Use .alert with .alert-{color} for colored alerts.
  • Add .alert-dismissible and btn-close for dismissal.
  • Use .badge with .bg-{color} for colored badges.
  • Add .rounded-pill for pill-style badges.

What's Next?

Next Topic: Learn Tooltips and Popovers for additional information.

Modals: Dialog Boxes

Use modals for important user interactions and confirmations

Modal Structure

Modals are useful for layered interactions that require user attention. They provide focus to important content.

Basic Modal

Modal with Header, Body, and Footer
<div class="modal" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </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</button>
      </div>
    </div>
  </div>
</div>

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

Modal Sizes

Small, Large, and Extra Large Modals
<!-- Small modal -->
<div class="modal-dialog modal-sm">...</div>

<!-- Large modal -->
<div class="modal-dialog modal-lg">...</div>

<!-- Extra large modal -->
<div class="modal-dialog modal-xl">...</div>

<!-- Centered vertically -->
<div class="modal-dialog modal-dialog-centered">...</div>

<!-- Scrollable content -->
<div class="modal-dialog modal-dialog-scrollable">...</div>

Modal Variants

Alert and Confirmation Modals
<!-- Success modal -->
<div class="modal-content border-success">
  <div class="modal-header bg-success text-white">
    <h5 class="modal-title">Success</h5>
  </div>
  <div class="modal-body">Operation completed successfully!</div>
</div>

<!-- Confirmation modal -->
<div class="modal-content border-warning">
  <div class="modal-header bg-warning">
    <h5 class="modal-title">Confirm Action</h5>
  </div>
  <div class="modal-body">Are you sure?</div>
  <div class="modal-footer">
    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
    <button class="btn btn-warning">Confirm</button>
  </div>
</div>

Modal Events

Handle Modal Events with JavaScript
const modalElement = document.getElementById('exampleModal');
const modal = new bootstrap.Modal(modalElement);

// Listen to modal events
modalElement.addEventListener('shown.bs.modal', () => {
  console.log('Modal is shown');
});

modalElement.addEventListener('hidden.bs.modal', () => {
  console.log('Modal is hidden');
});

// Show or hide modal programmatically
modal.show();
modal.hide();
Practice Tasks
  • Create a basic modal with header, body, and footer.
  • Create different size modals (sm, lg, xl).
  • Build a confirmation modal with action buttons.
  • Handle modal events with JavaScript.

Key Takeaways

  • Use .modal with data-bs-toggle="modal" to trigger.
  • Structure with .modal-header, .modal-body, .modal-footer.
  • Control size with .modal-sm, .modal-lg, .modal-xl.
  • Use data-bs-dismiss="modal" to close modals.

What's Next?

Next Topic: Learn Tabs and Accordion for organizing content.

Accordion: Collapsible Content

Use accordion to organize expandable content panels

Accordion Basics

Accordion components collapse content into panels that expand when clicked. Great for FAQs and content organization.

Basic Accordion

Simple Accordion Structure
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong>
      </div>
    </div>
  </div>
</div>

Flush Accordion

Borderless Accordion
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
        What is accordion?
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        Accordion is a component for showing/hiding content.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo">
        When to use?
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">
        Use for FAQs and content organization.
      </div>
    </div>
  </div>
</div>

Always Open Accordion

Multiple Items Open Simultaneously
<!-- Remove data-bs-parent to allow multiple open items -->
<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne">
        Item 1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        Content for item 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo">
        Item 2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        Content for item 2
      </div>
    </div>
  </div>
</div>
Practice Tasks
  • Create a basic accordion with 3-4 items.
  • Build a FAQ section using accordion.
  • Create a flush (borderless) accordion.
  • Allow multiple items to be open simultaneously.

Key Takeaways

  • Use .accordion with .accordion-item for structure.
  • Use data-bs-toggle="collapse" on buttons to trigger collapse.
  • Add data-bs-parent to collapse only one item at a time.
  • Use .accordion-flush for borderless design.

What's Next?

Next Topic: Learn Alerts and Badges for notifications.

Tabs: Organized Content

Use tabs to organize content into separate panels

Tab Navigation

Tabs enable users to navigate between related content panels. Perfect for organizing information by category.

Basic Tabs

Tab Navigation and Content
<div>
  <!-- Tab navigation -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
        Home
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile">
        Profile
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact">
        Contact
      </button>
    </li>
  </ul>

  <!-- Tab content -->
  <div class="tab-content" id="tabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
      Home content goes here.
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      Profile content goes here.
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      Contact content goes here.
    </div>
  </div>
</div>

Tab Styles

Pills and Justified Tabs
<!-- Pills style -->
<ul class="nav nav-pills" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-profile">Profile</button>
  </li>
</ul>

<!-- Justified tabs (full width) -->
<ul class="nav nav-tabs nav-fill" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab">Profile</button>
  </li>
</ul>

Vertical Tabs

Side-by-Side Layout
<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#v-pills-home">
        Home
      </button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#v-pills-profile">
        Profile
      </button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
        Home content
      </div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel">
        Profile content
      </div>
    </div>
  </div>
</div>
Practice Tasks
  • Create a basic tab navigation with 3+ tabs.
  • Create pills-style tabs.
  • Build vertical tabs with side-by-side layout.
  • Add dynamic tab switching with JavaScript.

Key Takeaways

  • Use .nav-tabs for tab navigation and .tab-content for panels.
  • Use data-bs-toggle="tab" and data-bs-target for tab triggers.
  • Add .active to show initially active tab.
  • Use .nav-pills for pill-style tabs or .flex-column for vertical.

What's Next?

Next Topic: Learn Accordion for collapsible content.

Tooltips and Popovers: Additional Information

Show additional information on hover and click

Tooltips and Popovers

Tooltips and popovers provide contextual information when users hover or click elements. Both require Popper.js.

Basic Tooltips

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

<!-- Initialize tooltips -->
<script>
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
const tooltipList = tooltipTriggerList.map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>

Basic Popovers

Popover with Title and Content
<!-- Basic popover -->
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

<!-- Popover with HTML -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-html="true" data-bs-content="<em>HTML</em> content">
  Popover with HTML
</button>

<!-- Initialize popovers -->
<script>
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
const popoverList = popoverTriggerList.map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>

Tooltip and Popover Directions

Different Placements
<!-- Tooltip directions -->
data-bs-placement="top"        <!-- Default -->
data-bs-placement="bottom"
data-bs-placement="left"
data-bs-placement="right"
data-bs-placement="auto"       <!-- Auto-adjust based on space -->

<!-- Popover directions -->
data-bs-placement="auto"
data-bs-placement="top"
data-bs-placement="bottom"
data-bs-placement="left"
data-bs-placement="right"

Custom Tooltips with JavaScript

Advanced Tooltip Configuration
// Create custom tooltip
const tooltip = new bootstrap.Tooltip(element, {
  placement: 'top',
  trigger: 'hover focus',
  title: 'Custom title',
  html: false,
  delay: { show: 500, hide: 100 }
});

// Show/hide programmatically
tooltip.show();
tooltip.hide();
tooltip.toggle();
tooltip.dispose();

// Popover with custom options
const popover = new bootstrap.Popover(element, {
  placement: 'right',
  trigger: 'click',
  title: 'Popover Title',
  content: 'Popover content here',
  html: true
});
Practice Tasks
  • Create tooltips in all four directions.
  • Initialize tooltips with JavaScript.
  • Create popovers with title and content.
  • Add HTML content to popovers.

Key Takeaways

  • Use data-bs-toggle="tooltip" with title attribute for tooltips.
  • Use data-bs-toggle="popover" for popovers.
  • Initialize with bootstrap.Tooltip or bootstrap.Popover.
  • Control placement with data-bs-placement attribute.

What's Next?

Next Topic: Learn Carousel for image slideshows.

Offcanvas: Side Drawers

Create hidden side panels that slide in from the edge

Offcanvas Component

Offcanvas components are hidden sidebars that slide in from the edge. Great for responsive navigation and additional content.

Basic Offcanvas

Simple Offcanvas Drawer
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Toggle offcanvas
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here.
  </div>
</div>

Offcanvas Directions

Start, End, Top, Bottom Positioning
<!-- From left (start) -->
<div class="offcanvas offcanvas-start">...</div>

<!-- From right (end) -->
<div class="offcanvas offcanvas-end">...</div>

<!-- From top -->
<div class="offcanvas offcanvas-top">...</div>

<!-- From bottom -->
<div class="offcanvas offcanvas-bottom">...</div>

Offcanvas with Navigation

Mobile Navigation Drawer
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navigation</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
      <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">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

Backdrop and Scrolling

Backdrop and Body Scroll Options
<!-- With backdrop -->
<div class="offcanvas offcanvas-start" tabindex="-1" data-bs-backdrop="true">
  <!-- content -->
</div>

<!-- No backdrop -->
<div class="offcanvas offcanvas-start" tabindex="-1" data-bs-backdrop="false" data-bs-scroll="true">
  <!-- content -->
</div>

<script>
const offcanvas = new bootstrap.Offcanvas(element, {
  backdrop: true,
  scroll: false,
  keyboard: true
});

offcanvas.show();
offcanvas.hide();
offcanvas.toggle();
</script>
Practice Tasks
  • Create a basic offcanvas drawer from the left.
  • Build a mobile navigation with offcanvas.
  • Create offcanvas drawers from all directions.
  • Toggle backdrop and body scrolling.

Key Takeaways

  • Use .offcanvas with .offcanvas-start/end/top/bottom for position.
  • Structure with .offcanvas-header and .offcanvas-body.
  • Trigger with data-bs-toggle="offcanvas" and data-bs-target.
  • Control with data-bs-backdrop and data-bs-scroll.

What's Next?

Next Topic: Learn Tables for data display.

Scrollspy: Auto-Highlight Navigation

Automatically update navigation based on scroll position

Scrollspy Overview

Scrollspy automatically updates navigation or list group components based on scroll position to indicate which link is currently active.

Basic Scrollspy

Navbar Scrollspy
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
      </ul>
    </li>
  </ul>
</nav>

<!-- Content -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
</div>

Scrollspy with List Group

List Group Scrollspy
<div class="row">
  <div class="col-4">
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
      <h4 id="list-item-1">Item 1</h4>
      <p>Content for item 1...</p>
      <h4 id="list-item-2">Item 2</h4>
      <p>Content for item 2...</p>
    </div>
  </div>
</div>

Scrollspy Configuration

Scrollspy Options and Events
<!-- Scrollspy with custom offset -->
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">
  <!-- Content -->
</div>

<!-- Target smooth scrolling -->
<html style="scroll-behavior: smooth;">

<script>
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example',
  offset: 10  // Pixels from top
});

// Listen to activate event
document.addEventListener('activate.bs.scrollspy', () => {
  console.log('Scrollspy activated');
});
</script>
Practice Tasks
  • Create a navbar with scrollspy navigation.
  • Build a list group with scrollspy.
  • Implement scrollspy with custom offset.
  • Test with multiple sections and headings.

Key Takeaways

  • Use data-bs-spy="scroll" and data-bs-target for scrollspy.
  • Link navigation items to content IDs with href.
  • Set data-bs-offset for offset from top.
  • Works with navbar, list group, and custom navigation.

What's Next?

Next Topic: Learn Offcanvas for side drawers.

Spacing Utilities: Margins and Padding

Use spacing utilities to control margins and padding throughout your design

Spacing Scale

Bootstrap provides a consistent spacing scale from 0 to 5 (and more), allowing precise control over white space.

Margin Utilities

Margin Classes
<!-- Margin on all sides -->
<div class="m-1">Margin 1</div>
<div class="m-3">Margin 3</div>
<div class="m-5">Margin 5</div>

<!-- Individual sides -->
<div class="mt-3">Top margin</div>
<div class="mb-3">Bottom margin</div>
<div class="ms-3">Left margin</div>
<div class="me-3">Right margin</div>

<!-- Horizontal and vertical -->
<div class="mx-2">Horizontal margin</div>
<div class="my-2">Vertical margin</div>

<!-- Negative margins -->
<div class="m-n2">Negative margin</div>

Padding Utilities

Padding Classes
<!-- Padding on all sides -->
<div class="p-1">Padding 1</div>
<div class="p-3">Padding 3</div>
<div class="p-5">Padding 5</div>

<!-- Individual sides -->
<div class="pt-3">Top padding</div>
<div class="pb-3">Bottom padding</div>
<div class="ps-3">Left padding</div>
<div class="pe-3">Right padding</div>

<!-- Horizontal and vertical -->
<div class="px-2">Horizontal padding</div>
<div class="py-2">Vertical padding</div>

Responsive Spacing

Breakpoint-Specific Spacing
<!-- Different spacing at different sizes -->
<div class="p-2 p-md-3 p-lg-5">Responsive padding</div>
<div class="m-1 m-md-2 m-lg-3">Responsive margin</div>
<div class="mb-3 mb-md-5">Responsive bottom margin</div>

Gap Utilities

Gap for Flex and Grid
<!-- Gap between flex items -->
<div class="d-flex gap-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Different gap sizes -->
<div class="d-flex gap-3">...</div>
<div class="d-flex gap-5">...</div>
Practice Tasks
  • Create boxes with different margin and padding values.
  • Apply responsive spacing at different breakpoints.
  • Use margin utilities to center content (mx-auto).
  • Use gap utilities in flex containers.

Key Takeaways

  • Use m-* for margin and p-* for padding.
  • Add t, b, s, e for specific sides (top, bottom, start, end).
  • Use x and y for horizontal and vertical spacing.
  • Add breakpoint infix for responsive spacing.

What's Next?

Next Topic: Learn Layout Containers for page layout.

Flexbox Utilities: Flexible Layouts

Master Bootstrap's flexbox utilities for perfect alignment and distribution

Why Flexbox?

Flexbox utilities provide powerful tools for alignment, spacing, and responsive layouts without writing custom CSS.

Direction and Wrapping

Flex Direction
<!-- Row (default) -->
<div class="d-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Column -->
<div class="d-flex flex-column">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Wrap items -->
<div class="d-flex flex-wrap">
  <div class="p-2">Item</div>
</div>

Alignment

Main Axis and Cross Axis Alignment
<!-- Main axis (horizontal) -->
<div class="d-flex justify-content-center">Centered</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex justify-content-around">Space around</div>

<!-- Cross axis (vertical) -->
<div class="d-flex align-items-center">Vertically centered</div>
<div class="d-flex align-items-start">Top aligned</div>
<div class="d-flex align-items-end">Bottom aligned</div>

Growing and Shrinking

Flex Grow
<div class="d-flex">
  <div class="flex-grow-1">Takes remaining space</div>
  <div>Fixed width</div>
</div>

<div class="d-flex">
  <div class="flex-shrink-1">Can shrink</div>
  <div class="flex-shrink-0">No shrinking</div>
</div>
Practice Tasks
  • Create a centered card using flexbox utilities.
  • Build a navigation bar with space-between alignment.
  • Create a footer with items aligned to edges.

Key Takeaways

  • Use d-flex to enable flexbox layout.
  • Control direction with flex-row or flex-column.
  • Align with justify-content (main axis) and align-items (cross axis).

What's Next?

Next Topic: Learn Responsive Breakpoints for mobile-first design.

Responsive Breakpoints: Design for Every Screen

Use Bootstrap breakpoints to create truly responsive designs

Understanding Breakpoints

Breakpoints are screen width thresholds where layouts change. Bootstrap provides 6 breakpoints for mobile-first design.

Mobile-First Approach

Design Mobile First, Scale Up
<!-- Start with mobile styles -->
<div class="col-12">Full width on mobile</div>

<!-- Add tablet styles -->
<div class="col-12 col-sm-6">Half width on tablet</div>

<!-- Add desktop styles -->
<div class="col-12 col-sm-6 col-md-4">1/3 width on desktop</div>

Responsive Display and Visibility

Show/Hide at Breakpoints
<!-- Show only on small screens -->
<div class="d-block d-md-none">Mobile menu</div>

<!-- Hide on small screens -->
<div class="d-none d-md-block">Desktop menu</div>

<!-- Responsive display changes -->
<div class="d-flex flex-column d-md-flex flex-md-row">Stack on mobile, row on desktop</div>

Responsive Spacing

Spacing Changes at Breakpoints
<!-- Different padding at different sizes -->
<div class="p-2 p-md-4 p-lg-5">Responsive padding</div>

<!-- Different margins -->
<div class="m-1 m-sm-2 m-md-3">Responsive margin</div>
Practice Tasks
  • Create a layout that changes layout at each breakpoint.
  • Show different navigation on mobile vs desktop.
  • Apply different spacing at different sizes.

Key Takeaways

  • Use breakpoint infixes (sm, md, lg, xl, xxl) in class names.
  • Design mobile-first, then enhance for larger screens.
  • Use d-none and d-{breakpoint}-block for responsive visibility.

What's Next?

Next Topic: Master Buttons and their styling options.

Icons: Visual Indicators

Use Bootstrap Icons for consistent iconography

Bootstrap Icons Library

Bootstrap Icons is a free, high quality, open source icon library with over 1,800 icons in SVG format.

Installing Bootstrap Icons

Include Bootstrap Icons CDN
<!-- From CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

<!-- Or via NPM -->
<!-- npm install bootstrap-icons -->

Using Icons

Icon Usage Examples
<!-- SVG Icon (recommended) -->
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>

<!-- Icon Font -->
<i class="bi bi-heart-fill"></i>
<i class="bi bi-search"></i>
<i class="bi bi-gear"></i>

<!-- In buttons -->
<button class="btn btn-primary">
  <i class="bi bi-download"></i> Download
</button>

<!-- In navigation -->
<nav>
  <a href="#"><i class="bi bi-house"></i> Home</a>
  <a href="#"><i class="bi bi-gear"></i> Settings</a>
</nav>

Icon Sizing and Styling

Customize Icon Size and Color
<!-- Different sizes -->
<i class="bi bi-heart" style="font-size: 0.8rem;"></i>
<i class="bi bi-heart" style="font-size: 1rem;"></i>
<i class="bi bi-heart" style="font-size: 2rem;"></i>

<!-- Different colors -->
<i class="bi bi-heart" style="color: #dc3545;"></i>
<i class="bi bi-heart" style="color: #28a745;"></i>

<!-- With Bootstrap text colors -->
<i class="bi bi-heart text-primary"></i>
<i class="bi bi-heart text-success"></i>
<i class="bi bi-heart text-danger"></i>

<!-- Animated -->
<i class="bi bi-hourglass-split" style="animation: spin 1s linear infinite;"></i>

<style>
@keyframes  spin {
  to { transform: rotate(360deg); }
}
</style>

Common Bootstrap Icons

Frequently Used Icons
<i class="bi bi-heart-fill"></i>        <!-- Like -->
<i class="bi bi-search"></i>          <!-- Search -->
<i class="bi bi-gear"></i>            <!-- Settings -->
<i class="bi bi-download"></i>        <!-- Download -->
<i class="bi bi-upload"></i>          <!-- Upload -->
<i class="bi bi-trash"></i>           <!-- Delete -->
<i class="bi bi-pencil"></i>          <!-- Edit -->
<i class="bi bi-check-circle-fill"></i> <!-- Success -->
<i class="bi bi-exclamation-circle-fill"></i> <!-- Warning -->
<i class="bi bi-x-circle-fill"></i>     <!-- Error -->
<i class="bi bi-arrow-up"></i>         <!-- Arrow Up -->
<i class="bi bi-arrow-down"></i>       <!-- Arrow Down -->
Practice Tasks
  • Include Bootstrap Icons CDN in your project.
  • Use 5+ different icons in your page.
  • Create buttons with icons and text.
  • Style icons with different colors and sizes.

Key Takeaways

  • Include Bootstrap Icons CSS from CDN or NPM.
  • Use <i class="bi bi-{name}"></i> syntax.
  • Combine with Bootstrap color classes.
  • Customize size with CSS font-size property.

What's Next?

Next Topic: Learn Components Overview for complete reference.

Customization with Sass

Customize Bootstrap by overriding Sass variables

Sass Customization

Bootstrap is built with Sass and you can customize everything by overriding its default Sass variables before importing Bootstrap.

Installation and Setup

Install Bootstrap via NPM
# Install Bootstrap
npm install bootstrap

# Install Sass compiler
npm install sass

Customizing with Sass

Override Default Variables
// 1. Include functions first (so you can manipulate colors)
@import "../node_modules/bootstrap/scss/functions";

// 2. Override default variables here
$primary: #0066cc;      // Custom primary color
$secondary: #666666;    // Custom secondary color
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;

// Font customization
$font-family-base: 'Arial', sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.5;

// Spacing customization
$spacer: 1rem;

// Border radius
$border-radius: 0.25rem;
$border-radius-lg: 0.3rem;

// 3. Include the rest of Bootstrap
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// ... include other Bootstrap files as needed

Common Customizations

Frequently Customized Variables
// Color customization
$primary: #007bff;
$secondary: #6c757d;
$light: #f8f9fa;
$dark: #343a40;

// Typography
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-size-base: 1rem;
$font-weight-bold: 700;
$headings-font-weight: 700;

// Spacing
$spacer: 1rem;
$grid-gutter-width: 1.5rem;
$padding-y: 0.5rem;

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// Container sizes
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Creating Custom Components

Build Custom Scss Components
// Custom component mixin
@mixin custom-card {
  border: 1px solid $border-color;
  border-radius: $border-radius;
  padding: $spacer;
  background-color: $light;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
}

// Using the mixin
.custom-card {
  @include custom-card;
}

// Creating color variants
@each $color, $value in $theme-colors {
  .bg-#{$color} {
    background-color: $value;
  }

  .text-#{$color} {
    color: $value;
  }
}
Practice Tasks
  • Set up Bootstrap with Sass/NPM.
  • Override primary and secondary colors.
  • Customize fonts and spacing variables.
  • Create custom Sass component with mixin.
    • \

Key Takeaways

  • Override variables BEFORE importing Bootstrap.
  • Import Bootstrap files selectively if desired.
  • Use Sass mixins to create reusable styles.
  • Compile Sass to CSS for production.

What's Next?

Next Topic: Learn Bootstrap Best Practices.

Components Overview: Complete Reference

Summary of all Bootstrap components and their usage

Bootstrap Components

Bootstrap provides a comprehensive set of pre-built, responsive components to accelerate web development.

Layout Components

Grid, Containers, and Layout
Container      - Fixed/fluid width container
Grid System    - 12-column responsive grid
Columns        - Flexible column layouts
Gutters        - Space between columns
Breakpoints    - Mobile, tablet, desktop sizes
Flexbox        - Flexible box alignment

Content Components

Typography and Content
Typography     - Headings, text, quotes
Tables         - Data display tables
Figures        - Images with captions
Images         - Responsive images
Code           - Inline and block code

Form Components

Form Controls and Input
Form Control   - Input fields, textarea
Select         - Dropdown selection
Checkbox       - Multiple selection
Radio          - Single selection
Toggle         - On/off switch
Range          - Slider input
Form Layout    - Horizontal, inline layouts
Validation     - Form validation states

Component Library

Interactive Components
Buttons        - Clickable buttons
Button Groups  - Grouped buttons
Dropdowns      - Dropdown menus
Navbars        - Navigation bars
Navigation     - Tabs, pills
Cards          - Content containers
Modals         - Dialog boxes
Alerts         - Alert messages
Badges         - Status indicators
Breadcrumbs    - Navigation path
Pagination     - Page navigation
ListGroups     - Item lists
Accordion      - Collapsible panels
Carousel       - Image slider

Feature Components

Advanced Features
Tooltips       - Hover information
Popovers       - Click information
Scrollspy      - Auto-highlighting nav
Offcanvas      - Side drawers
Spinners       - Loading indicators
Toast          - Notifications
Progress       - Progress bars
Separators     - Visual dividers

Quick Reference Table

Component Purpose Class
Button Clickable action .btn .btn-primary
Card Content container .card .card-body
Modal Dialog box .modal .modal-content
Alert Message notification .alert .alert-primary
Form User input .form-control .form-label
Practice Tasks
  • Create a dashboard using multiple components.
  • Build a landing page with cards, buttons, and forms.
  • Create a complete website mockup with navbar, hero, components.
  • Combine multiple components in creative ways.

Key Takeaways

  • Bootstrap offers 30+ pre-built components.
  • All components are responsive and mobile-first.
  • Combine components to build complete UIs.
  • Customize with color, size, and layout utilities.

What's Next?

Next Topic: Learn Customization with Sass.

Bootstrap Best Practices

Follow best practices for professional Bootstrap development

Best Practices Overview

Following best practices ensures maintainable, performant, and accessible Bootstrap projects.

1. Mobile-First Design

Design for Mobile First
<!-- BAD: Desktop-first -->
<div class="col-12 col-md-6 col-lg-4 d-none d-lg-block">

<!-- GOOD: Mobile-first -->
<div class="col-12 col-md-6 col-lg-4">

<!-- Mobile-first display classes -->
<div class="d-block d-md-none">Mobile only</div>
<div class="d-none d-md-block">Desktop only</div>

2. Semantic HTML

Use Semantic HTML Elements
<!-- BAD: Using div for everything -->
<div class="navbar">...</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- GOOD: Using semantic elements -->
<nav class="navbar">...</nav>
<main>...</main>
<footer>...</footer>

<!-- Semantic content -->
<article>...</article>
<section>...</section>
<aside>...</aside>

3. Accessibility (a11y)

Make Bootstrap Accessible
<!-- Proper form labels -->
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">

<!-- ARIA attributes -->
<button class="btn btn-primary" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

<!-- Proper heading hierarchy -->
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

<!-- Alt text for images -->
<img src="image.jpg" alt="Descriptive text" class="img-fluid">

4. Performance Optimization

Optimize Performance
<!-- Use CDN for faster delivery -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Lazy load images -->
<img src="image.jpg" class="img-fluid" loading="lazy" alt="...">

<!-- Defer non-critical JavaScript -->
<script src="script.js" defer></script>

<!-- Minimize CSS/JS usage -->
<!-- Only include needed Bootstrap components -->

5. Responsive Design

Design Responsive Layouts
<!-- Use grid system correctly -->
<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
      Content
    </div>
  </div>
</div>

<!-- Use responsive utilities -->
<div class="d-none d-md-block">Desktop only</div>
<div class="w-100 h-auto">Responsive sizing</div>

6. Code Organization

Organize Project Structure
project/
├── index.html
├── css/
│   ├── style.css (custom styles)
│   └── custom-bootstrap.scss
├── js/
│   ├── main.js
│   └── components.js
├── assets/
│   ├── images/
│   └── icons/
└── pages/
    ├── about.html
    └── contact.html
Practice Tasks
  • Refactor an existing project to use mobile-first design.
  • Add proper ARIA labels and semantic HTML.
  • Optimize Bootstrap CSS/JS delivery.
  • Organize project structure properly.

Key Takeaways

  • Always design mobile-first.
  • Use semantic HTML for better accessibility.
  • Include proper labels and ARIA attributes.
  • Optimize performance with CDN and lazy loading.

What's Next?

Next Topic: Learn about Bootstrap Migration and updates.

Migration and Updates: Staying Current

Update to latest Bootstrap versions and migrate projects

Bootstrap Versions

Bootstrap evolves with new versions. Stay updated with latest features, bug fixes, and improvements.

Version History

Bootstrap Major Versions
Bootstrap 5.3 (Current)  - Latest improvements
Bootstrap 5.2            - Updated utilities
Bootstrap 5.1            - New components
Bootstrap 5.0            - Major rewrite (flexbox)
Bootstrap 4.x            - Previous major version
Bootstrap 3.x            - Legacy version

// Key improvements in Bootstrap 5:
- Dropped jQuery dependency
- Switched to CSS variables
- Improved utilities
- Better components

Updating Bootstrap

Update via CDN or NPM
<!-- Update CDN link to latest version -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Update via NPM -->
npm install bootstrap@latest

<!-- Update package.json -->
{
  "dependencies": {
    "bootstrap": "^5.3.0"
  }
}

Breaking Changes v4 to v5

Major Changes in Bootstrap 5
<!-- jQuery removed - no dependency required -->
<!-- Previously: needed jQuery -->
<!-- Now: Works without jQuery -->

<!-- CSS Variables (Custom Properties) -->
:root {
  --bs-blue: #0d6efd;
  --bs-primary: #0d6efd;
  --bs-border-radius: 0.375rem;
}

<!-- Spacing scale updated -->
v4: m-1 to m-5
v5: $spacer scale 0-5 then extends to 6+

<!-- Responsive infix changes -->
v4: .col-sm-*, .col-md-*
v5: Same pattern, same breakpoints

<!-- Utilities expanded -->
Many more utility classes available
Responsive utilities for most classes

Migration Checklist

Steps to Migrate to Bootstrap 5
1. Backup existing project
2. Update Bootstrap CSS/JS to v5
3. Remove jQuery dependency if used
4. Check component compatibility:
   - Navbars may need updates
   - Form inputs changed
   - Utilities reorganized
5. Test responsive breakpoints
6. Update custom CSS/Sass
7. Test all components
8. Verify accessibility (a11y)
9. Test on multiple browsers
10. Update documentation

Common Migration Issues

Troubleshooting Migration Problems
<!-- Issue 1: Forms not styled -->
<!-- Solution: Use form-control, form-select classes -->

<!-- Issue 2: JavaScript components not working -->
<!-- Solution: Initialize with bootstrap.Modal, etc. -->

<!-- Issue 3: CSS not loading -->
<!-- Solution: Check CDN link and cache -->

<!-- Issue 4: Responsive not working -->
<!-- Solution: Check viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Issue 5: Utilities not applying -->
<!-- Solution: Check class names and breakpoint infixes -->
Practice Tasks
  • Update an old Bootstrap 4 project to Bootstrap 5.
  • Verify all components work after update.
  • Test responsive design at all breakpoints.
  • Update custom CSS for new variable system.

Key Takeaways

  • Bootstrap 5 is the current major version.
  • No jQuery dependency required.
  • CSS Variables replace Sass-only customization.
  • Plan migration carefully to avoid breaking changes.

What's Next?

Congratulations! You've completed the Bootstrap course. Start building responsive websites!

Last updated: February 2026