Carousel With Bootstrap 4

Carousel With Bootstrap 4 - It displays series of text, image and custom information to the user within certain duration. It also provides previous/next controls option to see the upcoming information or before displaying information and indicators that indicates active slider information.


The bootstrap carousel is used to show text, image and custom information to the user within certain duration. It has controls options that shows upcoming or previous information.


Source Code

          <div class="container mt-4 text-center">
  <div id="myCarouselslider" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarouselslider" data-slide-to="0" class="active"></li>
      <li data-target="#myCarouselslider" data-slide-to="1"></li>
      <li data-target="#myCarouselslider" data-slide-to="2"></li>
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="" alt="First Slide" />
      <div class="carousel-item">
        <img src="" alt="Second Slide" />
      <div class="carousel-item">
        <img src="" alt="Third Slide" />
    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarouselslider" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    <a class="carousel-control-next" href="#myCarouselslider" data-slide="next">
      <span class="carousel-control-next-icon"></span>
Try it now

Source Code: Output

Class Description

Class Description
.carousel .carousel class Creates a carousel
.carousel-indicators .carousel-indicators indicates little dots at the bottom of each slide.Active indicators indicates user is veiwing current slider.
.carousel-inner .carousel-inner is a container for all carousel items.
.carousel-item .carousel-item contains the text and image information.
.carousel-control-prev .carousel-control-prev class provides a left (previous) button to the carousel that allows to see previous slides.
.carousel-control-next .carousel-control-next displays a a right (next) button to the carousel, that displays next slide information.
.carousel-control-prev-icon .carousel-control-prev-icon is used with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon .carousel-control-next-icon is used with .carousel-control-next to create a "next" button
.slide .slide creates a transition and animation when sliding from one item to the next.

Online Test / Quiz

Web Tutorials

Carousel With Bootstrap 4
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4