Bootstrap5 Carousel

A carousel is a rotating slideshow:

How to Create a Carousel

The following example creates a simple image carousel effect:

Example

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

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

  <!-- Carousel Images -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
    </div>
  </div>

  <!-- Previous and Next Buttons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Adding Descriptions to Carousel Images

Add a <div class="carousel-caption"> inside each <div class="carousel-item"> to set the description text for the carousel images:

Example

<div class="carousel-item">
  <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
  <div class="carousel-caption">
        <h3>First Image Description Title</h3>
        <p>First image description content displayed here!!!</p>
  </div>
</div>

Class Descriptions Used in the Above Example

Class	Description
.carousel	Creates a carousel
.carousel-indicators	Adds indicators to the carousel, which are the small dots at the bottom of the carousel, showing the current slide number.
.carousel-inner	Adds the images to be switched
.carousel-item	Specifies the content of each image
.carousel-control-prev	Adds the previous button, which returns to the previous slide when clicked.
.carousel-control-next	Add right button, click to switch to the next slide.
.carousel-control-prev-icon	Used with .carousel-control-prev, sets the left button
.carousel-control-next-icon	Used with .carousel-control-next, sets the right button
.slide	Transition and animation effect for switching images, remove this class if you don't need such effects.

❮ Bootstrap5 Tooltip Bootstrap5 Forms ❯