What is Carousel captions in Bootsrap?

Carousel captions in Bootsrap - Syntax, Examples & Explanation

Introduction

Carousel captions help explain what each slide shows. They make the carousel easier to understand.

You want to describe images in a slideshow on your website.

You need to add titles and short text to each carousel slide.

You want visitors to know more about each picture or message in the carousel.

You want to improve accessibility by adding text descriptions.

You want to make your carousel more engaging with text overlays.

Syntax

Bootsrap

<div class="carousel-caption">
  <h5>Slide title</h5>
  <p>Some description text.</p>
</div>

The carousel-caption class places text over the carousel image.

You can use headings and paragraphs inside for titles and descriptions.

Examples

A simple caption with a title and description for the first slide.

Bootsrap

<div class="carousel-caption">
  <h5>First Slide</h5>
  <p>This is the first slide caption.</p>
</div>

Caption hidden on small screens using Bootstrap's responsive display classes.

Bootsrap

<div class="carousel-caption d-none d-md-block">
  <h5>Second Slide</h5>
  <p>Visible only on medium and larger screens.</p>
</div>

Caption text aligned to the left instead of center.

Bootsrap

<div class="carousel-caption text-start">
  <h5>Left Aligned Caption</h5>
  <p>Text aligned to the left side.</p>
</div>

Sample Program

This example shows a Bootstrap carousel with three slides. Each slide has an image and a caption with a title and description. Captions are visible on medium and larger screens. The third slide's caption text is aligned to the left.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Carousel with Captions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main>
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400.png?text=First+Slide" class="d-block w-100" alt="First slide image" />
          <div class="carousel-caption d-none d-md-block">
            <h5>First Slide Title</h5>
            <p>This is the caption for the first slide.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400.png?text=Second+Slide" class="d-block w-100" alt="Second slide image" />
          <div class="carousel-caption d-none d-md-block">
            <h5>Second Slide Title</h5>
            <p>This caption appears on medium and larger screens.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400.png?text=Third+Slide" class="d-block w-100" alt="Third slide image" />
          <div class="carousel-caption d-none d-md-block text-start">
            <h5>Third Slide Left Caption</h5>
            <p>Left aligned caption text for the third slide.</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Use alt attributes on images for accessibility.

Captions can be hidden on small screens using Bootstrap's display utility classes like d-none d-md-block.

Use aria-label and visually-hidden classes for better screen reader support on controls.

Summary

Carousel captions add text overlays to slides to explain content.

Use the carousel-caption class inside each carousel-item.

Control caption visibility and alignment with Bootstrap utility classes.