Bootstrap Masterclass - Complete Learning Hub

Bootstrap Components

Learn to use Bootstrap's extensive component library

Navigation Bar

Create responsive navigation headers

                                    
                                    
                                    
                                

                                <!-- Navbar Example -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Logo" height="30">
    </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 me-auto">
        <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="#" 
             role="button" data-bs-toggle="dropdown">
            Services
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">Development</a></li>
          </ul>
        </li>
      </ul>
      
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
                            

Navs & Tabs

Create navigation tabs and pills

                                    
                                    
                                    
                                

                                <!-- Tabs Navigation -->
<ul class="nav nav-tabs" id="myTab" 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">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">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">Contact</button>
  </li>
</ul>

<!-- Tab Content -->
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" 
       role="tabpanel">
    Home content...
  </div>
  <div class="tab-pane fade" id="profile" 
       role="tabpanel">
    Profile content...
  </div>
  <div class="tab-pane fade" id="contact" 
       role="tabpanel">
    Contact content...
  </div>
</div>

<!-- Pills Navigation -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>
                            

Home content goes here...

Profile content goes here...

Contact content goes here...

Breadcrumb

Indicate the current page's location

                                    
                                    
                                    
                                

                                <!-- Basic Breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

<!-- Custom Breadcrumb -->
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Laptops</li>
  </ol>
</nav>
                            

Pagination

Provide pagination links for your site

                                    
                                    
                                    
                                

                                <!-- Default Pagination -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<!-- Pagination with Icons -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
                            

Basic Buttons

Bootstrap's button styles for actions in forms, dialogs, and more

                                    
                                    
                                    
                                

                                <!-- Button Colors -->
<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</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>

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

<!-- Block Buttons -->
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Block level button</button>
  <button class="btn btn-outline-secondary" type="button">Block level button</button>
</div>
                            

Button Colors

Button Sizes

Button Groups

Group a series of buttons together on a single line

                                    
                                    
                                    
                                

                                <!-- Basic Button Group -->
<div class="btn-group" role="group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

<!-- Checkbox and Radio Button Groups -->
<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
  
  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
</div>

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
  
  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>

<!-- Vertical Button Group -->
<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
                            

Button Group

Checkbox Group

Option 1 Option 2

Loading Buttons

Buttons with loading states and spinners

                                    
                                    
                                    
                                

                                <!-- Buttons with Spinners -->
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<!-- Interactive Loading Button -->
<button class="btn btn-primary" type="button" id="loadingBtn">
  <span id="btnText">Click to Load</span>
  <span id="btnSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status"></span>
</button>

<script>
document.getElementById('loadingBtn').addEventListener('click', function() {
  const btnText = document.getElementById('btnText');
  const btnSpinner = document.getElementById('btnSpinner');
  const btn = this;
  
  btn.disabled = true;
  btnText.textContent = 'Loading...';
  btnSpinner.classList.remove('d-none');
  
  setTimeout(() => {
    btn.disabled = false;
    btnText.textContent = 'Click to Load';
    btnSpinner.classList.add('d-none');
  }, 2000);
});
</script>
                            

Loading States

Icon Buttons

Buttons with icons for better visual communication

                                    
                                    
                                    
                                

                                <!-- Icon Buttons -->
<button type="button" class="btn btn-primary">
  <i class="bi bi-download me-2"></i>Download
</button>

<button type="button" class="btn btn-outline-secondary">
  <i class="bi bi-gear me-2"></i>Settings
</button>

<!-- Icon Only Buttons -->
<button type="button" class="btn btn-primary btn-lg">
  <i class="bi bi-play-fill"></i>
</button>

<button type="button" class="btn btn-outline-danger">
  <i class="bi bi-trash"></i>
</button>

<!-- Floating Action Button -->
<button type="button" class="btn btn-primary btn-lg position-fixed bottom-0 end-0 m-3 rounded-circle" style="width: 60px; height: 60px;">
  <i class="bi bi-plus-lg"></i>
</button>

<!-- Social Media Buttons -->
<div class="d-flex gap-2">
  <button type="button" class="btn btn-primary">
    <i class="bi bi-facebook"></i>
  </button>
  <button type="button" class="btn btn-info">
    <i class="bi bi-twitter"></i>
  </button>
  <button type="button" class="btn btn-danger">
    <i class="bi bi-youtube"></i>
  </button>
  <button type="button" class="btn btn-dark">
    <i class="bi bi-github"></i>
  </button>
</div>
                            

Icon Buttons

Social Buttons

Basic Grid System

Bootstrap's powerful 12-column grid system

                                    
                                    
                                    
                                

                                <!-- Equal Width Columns -->
<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>

<!-- Column Widths -->
<div class="container">
  <div class="row">
    <div class="col-4">
      Column with width 4
    </div>
    <div class="col-8">
      Column with width 8
    </div>
  </div>
</div>

<!-- Variable Width Content -->
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>
                            

Equal Width Columns

Column 1

Column 2

Column 3

Column Widths

col-4

col-8

Responsive Grid

Build responsive layouts with breakpoint-specific columns

                                    
                                    
                                    
                                

                                <!-- Responsive Grid -->
<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  
  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  
  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

<!-- Breakpoints: -->
<!-- xs: <576px -->
<!-- sm: ≥576px -->
<!-- md: ≥768px -->
<!-- lg: ≥992px -->
<!-- xl: ≥1200px -->
<!-- xxl: ≥1400px -->
                            

Responsive Grid Demo

.col-12 .col-md-8

.col-6 .col-md-4

Offset & Alignment

Control column positioning and alignment

                                    
                                    
                                    
                                

                                <!-- Offset Columns -->
<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
</div>

<!-- Row Alignment -->
<div class="container">
  <!-- Vertical Alignment -->
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  
  <!-- Horizontal Alignment -->
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>
                            

Offset Columns

.col-md-4

.col-md-4 .offset-md-4

Horizontal Alignment

Centered

Columns

Nesting & Ordering

Nest grids and control column order

                                    
                                    
                                    
                                

                                <!-- Nested Grids -->
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Column Ordering -->
<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

<!-- Responsive Ordering -->
<div class="container">
  <div class="row">
    <div class="col order-last order-md-first">
      First, but last on medium and up
    </div>
    <div class="col">
      Second, but unchanged
    </div>
    <div class="col order-first order-md-last">
      Third, but first on medium and up
    </div>
  </div>
</div>
                            

Column Ordering

First

Second (order-5)

Third (order-1)

Basic Cards

Flexible and extensible content container

                                    
                                    
                                    
                                

                                <!-- Basic Card -->
<div class="card" style="width: 18rem;">
  <img src="..." 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 and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with List Group -->
<div class="card" style="width: 18rem;">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    <small class="text-muted">Last updated 3 mins ago</small>
  </div>
</div>

<!-- Card with Header and Footer -->
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
                            

Card Title

Some quick example text to build on the card title.

Go somewhere

Featured

An item
A second item
A third item

Last updated 3 mins ago

Card Layouts

Various card layout options

                                    
                                    
                                    
                                

                                <!-- Grid Cards -->
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Horizontal Card -->
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
                            

Grid Card

With supporting text below as a natural lead-in.

Go somewhere

Grid Card

With supporting text below as a natural lead-in.

Go somewhere

Card Groups

Group cards together with equal height and width

                                    
                                    
                                    
                                

                                <!-- Card Group -->
<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
                            

Card title

This is a wider card with supporting text.

Last updated 3 mins ago

Card title

This card has supporting text below.

Last updated 3 mins ago

Interactive Cards

Cards with hover effects and interactions

                                    
                                    
                                    
                                

                                <!-- Hover Card -->
<div class="card hover-lift">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Hover Card</h5>
    <p class="card-text">Hover over this card to see the lift effect.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>

<!-- Card with Overlay -->
<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>

<!-- Custom Styles -->
<style>
.hover-lift {
  transition: all 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
</style>
                            

Interactive Card

Hover over this card to see the lift effect.

Learn More

Basic Carousel

Slideshow component for cycling through elements

                                    
                                    
                                    
                                

                                <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
                            

Carousel with Controls

Carousel example featuring indicators and control buttons for navigation.

                                    
                                    
                                    
                                

                                <div id="carouselWithControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselWithControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 3">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithControls" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
                            

Carousel with Captions

Carousel example featuring captions that overlay each slide with text descriptions.

                                    
                                    
                                    
                                

                                <div id="carouselWithCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselWithCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="Slide 1">
      <div class="carousel-caption d-none d-md-block">
        <h5>First Slide Label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 2">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second Slide Label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 3">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third Slide Label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
                            

First Slide Label

Some representative placeholder content for the first slide.

Second Slide Label

Some representative placeholder content for the second slide.

Third Slide Label

Some representative placeholder content for the third slide.

Multiple Carousels

Example showing two independent carousels functioning separately on the same page.

                                    
                                    
                                    
                                

                                <!-- First Carousel -->
<div id="carouselOne" class="carousel slide mb-4" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselOne" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselOne" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!-- Second Carousel -->
<div id="carouselTwo" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselTwo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselTwo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
                            

Basic Modal

Modals are streamlined, but flexible dialog prompts

                                    
                                    
                                    
                                

                                <!-- 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">
        ...
      </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>
                            

Modal with Forms

Example modal containing a simple form layout for user input.

                                    
                                    
                                    
                                

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

<!-- Modal with Form -->
<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="formModalLabel">Sign Up Form</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form>
        <div class="modal-body">
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter your email">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Enter your password">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>
                            

Modal Sizes

Different modal sizes using Bootstrap’s .modal-sm, .modal-lg, and .modal-xl classes.

                                    
                                    
                                    
                                

                                <!-- Small Modal -->
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#smallModal">
  Small Modal
</button>

<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="smallModalLabel">Small Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is a small modal.
      </div>
    </div>
  </div>
</div>

<!-- Large Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
  Large Modal
</button>

<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is a large modal with more space for content.
      </div>
    </div>
  </div>
</div>

<!-- Extra Large Modal -->
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#extraLargeModal">
  Extra Large Modal
</button>

<div class="modal fade" id="extraLargeModal" tabindex="-1" aria-labelledby="extraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="extraLargeModalLabel">Extra Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is an extra-large modal for displaying wide content.
      </div>
    </div>
  </div>
</div>
                            

Static Backdrop

A modal that does not close when clicking outside or pressing the Esc key.

                                    
                                    
                                    
                                

                                <!-- Button trigger modal -->
<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal with Static Backdrop -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
  aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Static Backdrop Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        You cannot close this modal by clicking outside or pressing ESC.
      </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">Understood</button>
      </div>
    </div>
  </div>
</div>
                            

Animate.css Integration

Add animations to Bootstrap components

    
                                <!-- Include Animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <!-- Animated Elements --> <h1 class="animate__animated animate__bounce">An animated element</h1> <div class="card animate__animated animate__fadeInUp"> Card content </div> <button class="btn btn-primary animate__animated animate__pulse animate__infinite"> Pulsing Button </button> <!-- JavaScript for dynamic animations --> <script> const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft'); element.addEventListener('animationend', () => { // do something after animation ends }); </script>

Bouncing Title

Animated Card

This card fades in from below.

Transitions

Use Bootstrap’s transition utilities to add smooth interactive effects to components.

                                    
                                    
                                    
                                

                                <!-- Bootstrap Transition Example -->
<div class="transition p-3 bg-light border rounded" id="fadeBox">
  Hover to see transition effect
</div>

<style>
.transition {
  transition: all 0.4s ease-in-out;
}
.transition:hover {
  background-color: #0d6efd;
  color: #fff;
  transform: scale(1.05);
}
</style>
                            

Hover to see transition effect

Scroll Animations

Use Bootstrap’s scrollspy and fade utilities to animate sections as you scroll through content.

                                    
                                    
                                    
                                

                                <!-- Bootstrap Scroll Animation (Fade In) -->
<div data-bs-spy="scroll" data-bs-target="#scrollspy" data-bs-offset="0" tabindex="0" class="scroll-container border rounded p-3" style="height: 200px; overflow-y: scroll;">
  <div class="fade show p-3 mb-3 bg-light border">Section 1</div>
  <div class="fade show p-3 mb-3 bg-light border">Section 2</div>
  <div class="fade show p-3 mb-3 bg-light border">Section 3</div>
  <div class="fade show p-3 mb-3 bg-light border">Section 4</div>
</div>

<!-- Script to toggle fade effect when scrolling -->
<script>
document.querySelector('.scroll-container').addEventListener('scroll', e => {
  document.querySelectorAll('.fade').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.top < window.innerHeight - 50) {
      el.classList.add('show');
    } else {
      el.classList.remove('show');
    }
  });
});
</script>
                            

Section 1

Section 2

Section 3

Section 4

Loading Animations

Use Bootstrap spinners to indicate loading states in your interface.

                                    
                                    
                                    
                                

                                <!-- Bootstrap Spinners -->
<div class="d-flex justify-content-center align-items-center gap-3">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

  <div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>

  <div class="spinner-border text-danger" style="width: 2rem; height: 2rem;" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

<!-- Buttons with Spinners -->
<button class="btn btn-primary mt-3" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-success mt-3" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Processing
</button>
                            

Bootstrap 5 Cheat Sheet

Quick reference for Bootstrap classes and utilities

Essential Bootstrap Classes

.container

Fixed-width responsive container

.container-fluid

Full-width container spanning entire viewport

.row

Horizontal group of columns

.col

Auto layout column

.col-*

Set specific column width (e.g. .col-6)

.col-md-*

Responsive column for medium devices

.g-*

Set gutter spacing between columns

.offset-*

Add left margin offset to column

.order-*

Change order of columns

.d-flex

Enable flexbox display

.d-grid

Enable CSS grid display

.d-none

Hide element

.d-block

Display as block

.d-inline

Display as inline

.d-inline-block

Display as inline-block

.d-sm-none

Hide on small devices

.d-md-block

Show block on medium devices

.m-*

Set margin (0–5)

.p-*

Set padding (0–5)

.mt-*

Margin top

.mb-*

Margin bottom

.ms-*

Margin start (left in LTR)

.me-*

Margin end (right in LTR)

.pt-*

Padding top

.pb-*

Padding bottom

.ps-*

Padding start

.pe-*

Padding end

.mx-auto

Center horizontally

.my-auto

Center vertically (flex/grid)

.h1 – .h6

Bootstrap heading sizes

.display-1 – .display-6

Large display headings

.lead

Lead paragraph text

.fw-bold

Bold text

.fw-light

Light text

.fst-italic

Italic text

.text-center

Center align text

.text-start

Left align text

.text-end

Right align text

.text-uppercase

Uppercase text

.text-muted

Muted text color

.text-primary

Primary color text

.text-danger

Red/danger text color

.bg-primary

Primary background color

.bg-success

Success background color

.bg-danger

Danger background color

.bg-warning

Warning background color

.bg-info

Info background color

.bg-light

Light background

.bg-dark

Dark background

.text-bg-primary

Combined text and background style

.btn

Base button class

.btn-primary

Primary button

.btn-outline-primary

Outlined primary button

.btn-sm

Small button

.btn-lg

Large button

.btn-group

Group multiple buttons

.card

Card container

.card-body

Main card content area

.card-title

Card title

.card-text

Card text content

.card-header

Header area of card

.card-footer

Footer area of card

.card-img-top

Image on top of card

.alert

Alert box

.alert-primary

Primary alert

.badge

Badge label

.badge.bg-danger

Red badge

.progress

Progress bar container

.progress-bar

Progress indicator

.navbar

Navigation bar container

.navbar-brand

Brand name/logo

.navbar-nav

Nav list inside navbar

.nav-item

Navigation item

.nav-link

Link inside nav

.navbar-toggler

Collapse button for navbar

.collapse

Collapse behavior container

.modal

Modal dialog box

.modal-dialog

Wrapper for modal content

.modal-content

Modal inner content

.modal-header

Header of modal

.modal-footer

Footer of modal

.offcanvas

Sidebar overlay component

.toast

Notification toast

.form-control

Text input or select element

.form-check

Checkbox or radio container

.form-check-input

Checkbox or radio input

.form-label

Label for form input

.input-group

Wraps inputs with buttons or addons

.input-group-text

Text addon inside input group

.form-floating

Floating label input

.img-fluid

Responsive image

.rounded

Rounded corners

.rounded-circle

Circle-shaped image

.figure

Container for image and caption

.figure-caption

Caption for a figure

.table

Base table styling

.table-striped

Alternate row stripes

.table-hover

Highlight rows on hover

.list-group

List group container

.list-group-item

Individual list item

.shadow

Add default box shadow

.shadow-lg

Larger box shadow

.rounded-pill

Rounded pill shape

.opacity-75

Set element opacity

.position-relative

Position element relative

.position-absolute

Position element absolute

.top-0

Align to top

.bottom-0

Align to bottom

.start-0

Align to left/start

.end-0

Align to right/end

.z-3

High z-index stacking

.overflow-hidden

Hide overflow content

.ratio-16x9

Responsive video ratio

.visually-hidden

Hide visually but accessible to screen readers

.container

Responsive fixed width container

.container-fluid

Full width container

.row

Row in grid system

.col

Column in grid system

.col-6

Column with width 50%

.col-md-4

Medium column with 33% width

.card

Card component

.card-body

Card content container

.card-title

Card title styling

.card-text

Card text styling

.btn

Button component

.btn-primary

Primary styled button

.btn-secondary

Secondary styled button

.btn-success

Success styled button

.btn-danger

Danger styled button

.btn-warning

Warning styled button

.btn-info

Info styled button

.btn-light

Light styled button

.btn-dark

Dark styled button

.btn-outline-primary

Primary outlined button

.btn-outline-secondary

Secondary outlined button

.btn-outline-success

Success outlined button

.btn-outline-danger

Danger outlined button

.btn-outline-warning

Warning outlined button

.btn-outline-info

Info outlined button

.btn-outline-light

Light outlined button

.btn-outline-dark

Dark outlined button

.badge

Badge component

.badge-primary

Primary badge

.badge-secondary

Secondary badge

.badge-success

Success badge

.badge-danger

Danger badge

.badge-warning

Warning badge

.badge-info

Info badge

.badge-light

Light badge

.badge-dark

Dark badge

.alert

Alert component

.alert-primary

Primary alert

.alert-secondary

Secondary alert

.alert-success

Success alert

.alert-danger

Danger alert

.alert-warning

Warning alert

.alert-info

Info alert

.alert-light

Light alert

.alert-dark

Dark alert

.dropdown

Dropdown container

.dropdown-toggle

Dropdown toggle button

.dropdown-menu

Dropdown menu

.dropdown-item

Dropdown item

.dropdown-divider

Dropdown divider

.modal

Modal container

.modal-dialog

Modal dialog

.modal-content

Modal content

.modal-header

Modal header

.modal-body

Modal body

.modal-footer

Modal footer

.form-control

Form input control

.form-label

Form label

.form-check

Checkbox container

.form-check-input

Checkbox input

.form-check-label

Checkbox label

.form-select

Select dropdown

.input-group

Input group wrapper

.input-group-text

Input group text

.navbar

Navigation bar

.navbar-brand

Navbar brand/logo

.navbar-nav

Navbar navigation links

.nav-item

Navbar item

.nav-link

Navbar link

.pagination

Pagination container

.page-item

Pagination item

.page-link

Pagination link

.tooltip

Tooltip container

.popover

Popover container

.accordion

Accordion container

.accordion-item

Accordion item

.accordion-header

Accordion header

.accordion-body

Accordion body

.collapse

Collapsible element

.carousel

Carousel container

.carousel-inner

Carousel inner wrapper

.carousel-item

Single carousel item

.carousel-caption

Carousel caption text

.carousel-control-prev

Previous button control

.carousel-control-next

Next button control

.spinner-border

Border spinner loader

.spinner-grow

Growing spinner loader

.progress

Progress bar container

.progress-bar

Progress bar

.list-group

List group container

.list-group-item

List group item

.breadcrumb

Breadcrumb container

.breadcrumb-item

Breadcrumb item

.jumbotron

Jumbotron component

.figure

Figure component

.figure-img

Figure image

.figure-caption

Figure caption

Grid System

Breakpoint	Class infix	Dimensions
Extra small	`none`	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

Color Palette

Primary

Secondary

Success

Danger

Warning

Info

Master Bootstrap 5

50+

100%

5.3

About Bootstrap

What is Bootstrap?

Why Use Bootstrap?

Key Features of Bootstrap

Bootstrap Features Demo

Responsive Grid

Components

Bootstrap Advantages

Advantages in Action

Common Use Cases

Popular Use Cases

Installation Process

Bootstrap CDN Installation

CDN Result

Hello, Bootstrap!

Download Bootstrap

Download Steps

Package Manager Installation

Package Manager Benefits

✓ Version Control

✓ Updates

Source Files Installation

Source Files Advantages

Custom Theming

Color Customization

Custom Colors Preview

Font Customization

Custom Typography

Heading 1 - Custom Font

Component Themes

Custom Components

Hover Card

Dark Mode Implementation

Dark Mode Toggle

Preview Card

Bootstrap Components

Navigation Bar

Navs & Tabs

Breadcrumb

Pagination

Basic Buttons

Button Colors

Button Sizes

Button Groups

Button Group

Checkbox Group

Loading Buttons

Loading States

Icon Buttons

Icon Buttons

Social Buttons

Basic Grid System

Equal Width Columns

Column Widths

Responsive Grid

Responsive Grid Demo

Offset & Alignment

Offset Columns

Horizontal Alignment

Nesting & Ordering

Column Ordering

Basic Cards

Card Title

Card Layouts

Grid Card

Grid Card

Card Groups

Card title

Card title

Interactive Cards

Interactive Card

Basic Carousel

Carousel with Controls

Carousel with Captions

First Slide Label

Second Slide Label