Bootstrap 4 Carousel, How To Learn Bootstrap 4 Carousel Tutorial

Bootstrap 4 Tutorial

Bootstrap 4 carousel

Bootstrap 4 carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set. Note the presence of the .carousel, .d-block and .img-fluid on carousel images to prevent browser default image alignment.

Slides with Controls

The Bootstrap 4 .carousel and .slide to an outer container (with its own ID).

For the scrollable contents, wrap all items in a .carousel-inner and give each item a .carousel-item class.

To add "Previous/Next" controls, use an <a> with .carousel-control-prev or .carousel-control-next. Also add a <span> with .carousel-control-prev-icon or .carousel-control-next-icon.

<div id="carouselControl" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselControl" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselControl" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Output :

Slide Controls With indicators

To add "indicator" controls, add a list with .carousel-indicators, as well as the applicable .data-target and .data-slide-to attributes.

<div id="CarouselIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#CarouselIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#CarouselIndicators" data-slide-to="1"></li>
    <li data-target="#CarouselIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="../images/content/images-4.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#CarouselIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#CarouselIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Output :

Slide Controls With Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

<div id="CarouselCaptions" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#CarouselCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#CarouselCaptions" data-slide-to="1"></li>
    <li data-target="#CarouselCaptions" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../images/content/images-4.jpg" class="d-block w-100" alt="First Slider">
      <div class="carousel-caption d-none d-md-block">
        <h3>First Slider</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="../images/content/images-4.jpg" class="d-block w-100" alt="Second Slider">
      <div class="carousel-caption d-none d-md-block">
        <h3>Second Slider</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="../images/content/images-4.jpg" class="d-block w-100" alt="Third Slider">
      <div class="carousel-caption d-none d-md-block">
        <h3>Third Slider</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>   
    </div>
  </div>
  <a class="carousel-control-prev" href="#CarouselCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#CarouselCaptions" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Output :

Bootstrap 4 Tutorial