❮ Bootstrap4 List Groups Bootstrap4 Scrollspy ❯

Bootstrap4 Carousel

A carousel is a rotating slideshow:

How to Create a Carousel

The following example creates a simple image carousel effect:

Example

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

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- 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">
    </div>
    <div class="carousel-item">
      <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_mountains_wide.jpg">
    </div>
  </div>

  <!-- Left and Right Controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</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">
  <div class="carousel-caption">
    <h3>First Image Description Title</h3>
    <p>Description text!</p>
  </div>
</div>

Class Descriptions Used in the 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 a left button that returns to the previous slide.
.carousel-control-next	Adds a right button that switches to the next slide.
.carousel-control-prev-icon	Used with .carousel-control-prev to set the left button
.carousel-control-next-icon	Used with .carousel-control-next to set the right button
.slide	Adds transition and animation effects to the image switching. If you don't need this effect, you can remove this class.

❮ Bootstrap4 List Groups Bootstrap4 Scrollspy ❯