What is Carousel indicators in Bootsrap?

Bootsrapmarkup~5 mins

Carousel indicators in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Carousel indicators help users see which slide is active and let them jump to any slide easily.

You want to show multiple images or content slides in one place.

You want users to control which slide they see quickly.

You want to improve navigation and user experience in a slideshow.

You want to show progress or position in a series of slides.

Syntax

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

Each button represents one slide indicator.

The data-bs-slide-to attribute sets which slide the button controls, starting at 0.

Examples

Two indicators for a carousel with two slides. The first is active.

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>

Four indicators for a carousel with four slides. Only the first is active.

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>

Sample Program

This example shows a Bootstrap carousel with three slides and indicators below. The indicators let you jump to any slide. The first indicator is active by default.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Carousel Indicators Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main>
    <section class="container mt-5">
      <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExample" 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/800x300?text=First+Slide" class="d-block w-100" alt="First slide image" />
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300?text=Second+Slide" class="d-block w-100" alt="Second slide image" />
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300?text=Third+Slide" class="d-block w-100" alt="Third slide image" />
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Always add aria-label to buttons for screen readers.

The active indicator must have class="active" and aria-current="true" for accessibility.

Make sure the data-bs-target matches the carousel's id.

Summary

Carousel indicators show which slide is active and let users pick slides.

Use button elements with data-bs-slide-to inside a carousel-indicators container.

Keep accessibility in mind with proper ARIA attributes.