Bootstrap Carousel

A carousel is a slideshow that cycles through a series of images or content panels. Bootstrap 5 provides a fully working carousel out of the box, complete with sliding animations, navigation arrows, and indicator dots, all controlled with simple data attributes.

What is a Carousel?

A Bootstrap carousel rotates through slides one at a time. Each slide is a .carousel-item, and all of them live inside a .carousel-inner container. The whole thing is wrapped in an element with the .carousel class and a unique id so the controls know which carousel to operate.

Exactly one slide must have the class .active when the page loads. This is the slide shown first. If you forget it, the carousel will look empty until the user interacts with it.

A Basic Carousel

The example below shows three slides. The .slide class enables the sliding animation, and data-bs-ride="carousel" tells Bootstrap to start cycling automatically as soon as the page loads.

Basic carousel

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="demoCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Note: The classes d-block and w-100 on the images stop the default inline spacing below images and stretch each image to fill the carousel width so the slides line up cleanly.

Adding Controls and Indicators

To let users move between slides, add previous/next arrows and the small indicator dots. The controls use data-bs-slide with a value of prev or next, and the indicators use data-bs-slide-to with the index of the slide to jump to. Both must point at the carousel using data-bs-target.

Carousel with arrows and dots

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="fullCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#fullCarousel"
            data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#fullCarousel"
            data-bs-slide-to="1"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="a.jpg" class="d-block w-100" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="b.jpg" class="d-block w-100" alt="Slide two">
    </div>
  </div>
  <button class="carousel-control-prev" type="button"
          data-bs-target="#fullCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button"
          data-bs-target="#fullCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

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

Adding Captions

You can place text on top of each slide with a .carousel-caption block. It is usually hidden on very small screens and shown on medium screens and up using the d-none d-md-block utilities.

Slide with a caption

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="carousel-item active">
  <img src="team.jpg" class="d-block w-100" alt="Our team">
  <div class="carousel-caption d-none d-md-block">
    <h5>Meet the team</h5>
    <p>The people who build Hyring every day.</p>
  </div>
</div>

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

Useful Data Attributes

AttributeWhat it does
data-bs-ride="carousel"Starts autoplaying the slides on page load
data-bs-intervalSets the delay in milliseconds between slides
data-bs-slide="prev" / "next"Moves the carousel one step back or forward
data-bs-slide-toJumps directly to a slide by its zero-based index
data-bs-pause="hover"Pauses the cycle when the mouse hovers the carousel
Note: Slide indexes start at 0, so the first slide is data-bs-slide-to="0", the second is "1", and so on.

Exercise: Bootstrap Carousel

What happens if none of a carousel's .carousel-item elements has the .active class?

Keep Going

Bootstrap Interview QuestionsPractice real questions asked for BootstrapFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to Bootstrap and tweak your resume