Carousel and Modal

1. Introduction

(1) Prerequisites

Lesson 13: Forms and Form Validation

(2) 🎯 What You'll Learn

Build a carousel and configure auto-play
Enhance the carousel using indicators, previous/next arrows, and captions
Build a modal and control opening/closing
Use modal size variants and vertical centering
Embed forms and carousels inside modals

(3) The Problem

Alice's product detail page needs an image carousel to display multiple angles of the product, and a "Quick View" modal that pops up with product details—working together, these two components create a professional user experience without writing custom JavaScript.

(4) The Solution

Carousels and modals are two of the most commonly used interactive JavaScript components in Bootstrap. A carousel is used to cycle through images or content, while a modal is used to display a dialog box, form, or confirmation message.

(5) The Benefit

Using carousels and modals together allows you to create a professional product showcase without writing any JavaScript.

2. Carousels

▶ Example: Basic Carousel

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">

      <div class="carousel-indicators">
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#demoCarousel" data-bs-slide-to="2"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=Slide+1" class="d-block w-100" alt="Slide 1">
          <div class="carousel-caption d-none d-md-block">
            <h5>First Slide</h5>
            <p>Welcome to Bootstrap Carousel.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=Slide+2" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=Slide+3" class="d-block w-100" alt="Slide 3">
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#demoCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#demoCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

(1) Carousel Component Structure

Element	class/data-*	Description
Container	`carousel slide`	The carousel container; the id is used for binding
Indicators	`carousel-indicators`	The bottom dots for jumping to a slide
Slides Container	`carousel-inner`	Wraps all slides
Individual Slide	`carousel-item`	The content for each slide
Active Slide	`carousel-item active`	The currently displayed slide
Caption	`carousel-caption`	Text overlay on the image

(2) Carousel Configuration

HTML

<!-- Auto-play every 2 seconds (default: 5000ms) -->
<div id="carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">

<!-- Fade transition instead of slide -->
<div id="carousel" class="carousel slide carousel-fade">

▶ Try it Yourself

3. Modals

HTML

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

<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5">Modal Title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the modal body content. You can put any HTML here.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

Element	class	Description
Backdrop	`modal fade`	The semi-transparent background overlay
Dialog	`modal-dialog`	Controls size and vertical centering
Content	`modal-content`	The white panel container
Header	`modal-header`	Title + close button
Body	`modal-body`	Main content area
Footer	`modal-footer`	Action button group

HTML

<div class="modal-dialog modal-sm">Small</div>
<div class="modal-dialog modal-lg">Large</div>
<div class="modal-dialog modal-xl">Extra large</div>
<div class="modal-dialog modal-dialog-centered">Vertically centered</div>
<div class="modal-dialog modal-dialog-scrollable">Scrollable body</div>
<div class="modal-dialog modal-fullscreen-md-down">Full screen on mobile</div>

▶ Try it Yourself

class	Width	Use Case
`modal-sm`	300px	Confirmation dialogs
Default	500px	General forms
`modal-lg`	800px	Large forms
`modal-xl`	1140px	Full-size content
`modal-fullscreen`	100vw	Full screen on mobile

▶ Example: Product Carousel with Caption and Indicators

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Carousel</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div id="productCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="3000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#productCarousel" data-bs-slide-to="2"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400/0d6efd/fff?text=iPhone+15" class="d-block w-100" alt="Product 1">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>iPhone 15 Pro</h5>
            <p>Starting at $999 — A17 Pro chip, titanium design.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/198754/fff?text=MacBook+Air" class="d-block w-100" alt="Product 2">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>MacBook Air M3</h5>
            <p>Lightweight power — 18hr battery, 15-inch display.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400/dc3545/fff?text=AirPods+Pro" class="d-block w-100" alt="Product 3">
          <div class="carousel-caption d-none d-md-block bg-dark bg-opacity-50 rounded p-3">
            <h5>AirPods Pro 2</h5>
            <p>Adaptive audio, noise cancellation, USB-C.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ Try it Yourself

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
  Leave Feedback
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Send Feedback</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label class="form-label">Your Name</label>
            <input type="text" class="form-control" placeholder="Enter name">
          </div>
          <div class="mb-3">
            <label class="form-label">Rating</label>
            <select class="form-select">
              <option selected>5 - Excellent</option>
              <option>4 - Good</option>
              <option>3 - Average</option>
              <option>2 - Poor</option>
              <option>1 - Terrible</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea class="form-control" rows="3" placeholder="Tell us about your experience..."></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

HTML

<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carouselModal">
  View Gallery
</button>

<div class="modal fade" id="carouselModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Product Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-0">
        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://via.placeholder.com/800x500/0d6efd/fff?text=Photo+1" class="d-block w-100" alt="Photo 1">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/198754/fff?text=Photo+2" class="d-block w-100" alt="Photo 2">
            </div>
            <div class="carousel-item">
              <img src="https://via.placeholder.com/800x500/dc3545/fff?text=Photo+3" class="d-block w-100" alt="Photo 3">
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

HTML

<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
  Open with Static Backdrop
</button>

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content text-center">
      <div class="modal-body py-4">
        <div class="display-6 text-warning mb-3">⚠️</div>
        <h5>Delete Account?</h5>
        <p class="text-muted small">This action cannot be undone.</p>
        <div class="d-grid gap-2">
          <button class="btn btn-danger">Confirm Delete</button>
          <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>

▶ Try it Yourself

flowchart TD
    subgraph Carousel
        A[carousel slide] --> B[carousel-indicators (Indicators)]
        A --> C[carousel-inner (Slides Container)]
        C --> D[carousel-item active (Current Slide)]
        C --> E[carousel-item (Other Slides)]
        A --> F[carousel-control-prev/next (Previous/Next Arrows)]
        D --> G[carousel-caption (Caption)]
    end
    subgraph Modal
        H[modal fade (Backdrop)] --> I[modal-dialog (Dialog)]
        I --> J[modal-content (Content Panel)]
        J --> K[modal-header (Header)]
        J --> L[modal-body (Body)]
        J --> M[modal-footer (Footer)]
    end
    N[User Click] --> O{Target}
    O -->|Carousel Indicator| B
    O -->|Carousel Arrow| F
    O -->|Open Button| H
    O -->|Close Button| K

data-bs-* Attribute	Target	Values
`data-bs-ride="carousel"`	Carousel container	`carousel` / `false`
`data-bs-interval`	Carousel container	Milliseconds (default 5000)
`data-bs-slide-to`	Indicator button	Index (0,1,2...)
`data-bs-slide`	Control button	`prev` / `next`
`data-bs-toggle="modal"`	Trigger element	`modal`
`data-bs-target="#id"`	Trigger element	Target modal ID
`data-bs-dismiss="modal"`	Close button	`modal`
`data-bs-backdrop`	Modal	`true` / `false` / `static`
`data-bs-keyboard`	Modal	`true` / `false`
`data-bs-touch`	Carousel container	`true` / `false`

Carousel Option	data attribute	Effect
Auto-play	`data-bs-ride="carousel"`	Starts auto-playing on page load
Interval	`data-bs-interval="2000"`	Switches slides every 2 seconds
Fade transition	class `carousel-fade`	Fades in/out instead of sliding
Pause on hover	`data-bs-pause="hover"`	Pauses when mouse hovers over
Touch swipe	`data-bs-touch="true"`	Enables swipe gestures on mobile
Infinite loop	`data-bs-wrap="true"`	Returns to the first slide after the last one

Modal Size	class	Width	Use Case
Small	`modal-sm`	300px	Confirmation dialogs, brief messages
Default	none	500px	Forms, information display
Large	`modal-lg`	800px	Large forms, data tables
Extra Large	`modal-xl`	1140px	Full-size content panels
Fullscreen	`modal-fullscreen`	100vw	Immersive mobile experience

❓ Frequently Asked Questions

Q What if the carousel images have different sizes?

A There are two solutions: (1) Use images with a fixed size (recommended: crop to a uniform ratio like 16:9); (2) Use object-fit: cover along with a fixed height for the carousel.

Q Can the background scroll when a modal is open?

A No, by default—when a modal is open, the body's overflow is set to hidden. To allow scrolling, add modal-dialog-scrollable to modal-dialog.

Q Can modals be nested?

A Bootstrap does not support nested modals. Only one modal is displayed at a time. However, you can use JavaScript to open one modal after closing another.

Q Does the carousel support keyboard controls?

A Yes. When the carousel has focus, the left and right arrow keys switch slides. This is enabled by default.

Q Does the carousel support swipe gestures on mobile?

A Yes. Bootstrap 5's carousel enables touch events by default (data-bs-touch="true"), allowing users to swipe left/right with their fingers to switch slides on mobile devices without extra configuration.

📖 Summary

Carousel structure: carousel slide > carousel-inner > carousel-item active, with indicators and previous/next arrows
data-bs-ride="carousel" for auto-play, carousel-fade for fade transition
Modal structure: modal fade > modal-dialog > modal-content (header + body + footer)
Modal sizes: modal-sm/modal-lg/modal-xl/modal-fullscreen
Both are driven by data-bs-* attributes; Bootstrap JS must be included

📝 Assignments

⭐ Create a product showcase carousel: 3 product images + captions (carousel-caption) + indicators + previous/next arrows, auto-switching every 3 seconds.
⭐⭐ Implement a "Quick View" feature: A button on a product card that opens a modal displaying a large product image, name, price, description, and a buy button.
⭐⭐⭐ Create a full-screen modal (on mobile) that contains a registration form (name + email + password).

Previous lesson: Forms · Next lesson: Alerts

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Carousel and Modal

1. Introduction

(1) Prerequisites

(2) 🎯 What You'll Learn

(3) The Problem

(4) The Solution

(5) The Benefit

2. Carousels

▶ Example: Basic Carousel

(1) Carousel Component Structure

(2) Carousel Configuration

3. Modals

(1) Modal Structure

4. Modal Sizes and Alignment

5. More Carousel & Modal Examples

▶ Example: Product Carousel with Caption and Indicators

▶ Example: Modal with Embedded Form

▶ Example: Modal with Embedded Carousel

▶ Example: Static Backdrop Modal

(1) Carousel-Modal Interaction Flow

❓ Frequently Asked Questions

📖 Summary

📝 Assignments

🙏 帮我们做得更好