Bootstrap · Chapter 24 of 43

Bootstrap Carousel

A carousel is a slideshow component for cycling through images or content, one slide at a time. It's built from a .carousel wrapper, a .carousel-inner containing .carousel-item slides, and optional indicators and controls.

The carousel can autoplay, and includes previous/next arrow buttons plus small indicator dots so users can jump directly to a specific slide.

Syntax

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">...</div>
  </div>
</div>

Carousel structure

Each slide is a .carousel-item inside .carousel-inner, and exactly one slide must have the .active class to be visible first. Previous and next buttons use data-bs-slide="prev" or "next".

Indicators and captions

Indicator dots use data-bs-target and data-bs-slide-to to jump to a specific slide. You can add .carousel-caption inside a slide for a title and description overlay.

Example 1 (html)

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x300/333" class="d-block w-100" alt="Slide 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Output

An image slideshow with clickable left/right arrows to move between two slides

The active class shows the first slide, and the prev/next buttons let users navigate through the carousel.

Example 2 (html)

<div class="carousel-item active">
  <img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="Slide">
  <div class="carousel-caption d-none d-md-block">
    <h5>Slide Title</h5>
    <p>A short description of this slide.</p>
  </div>
</div>

Output

A slide image with a title and description overlay, visible on medium screens and up

carousel-caption overlays text on the slide, and d-none d-md-block hides it on small screens to avoid clutter.

Key points

Exactly one .carousel-item must have the .active class.
Previous/next buttons use data-bs-slide="prev" or "next".
Indicator dots use data-bs-slide-to to jump to a specific slide index.
.carousel-caption adds an overlay title and description to a slide.

💡 Note: Carousels require Bootstrap's JavaScript to handle sliding, autoplay, and controls.

Bootstrap Carousel

Carousel structure

Indicators and captions

Key points

📝 Quick Quiz