Home >>Bootstrap Tutorial >Bootstrap Carousel

Bootstrap Carousel

Bootstrap Carousel

The Bootstrap carousel is used to provide the sliding effects in images or text. It makes the webpages look more attractive. Visible the carousel to your webpage you need to apply .active class to one of the slides in class carousel-item. Add class carousel slide, id and attribute data-ride="carousel" for sliding the images. You can also add caption (text) on sliding Images.

Let's take an example of bootstrap carousel:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Carousel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner img{
  height: 600px;
  width:100%;
  }
  </style>
</head>
<body>
<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>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../Caraousel/1.jpg" class="img-fluid" alt="Edu">
    </div>
    <div class="carousel-item">
       <img src="../Caraousel/2.jpg" class="img-fluid" alt="Books">
    </div>
    <div class="carousel-item">
       <img src="../Caraousel/3.jpg" class="img-fluid" alt="student">
    </div>
  </div>
</div>
</body>
</html>
Output:

Carousel with controls and captions

You can add controls and captions in carousel images. If you want to show the text on images, bootstrap provides you some predefined classes to add controls and captions.

Let's take an example of carousel control and captions:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Carousel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <style>
  .carousel-inner img{
  height: 600px;
  width:100%;
  }
  </style>
</head>
<body>
<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>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../Caraousel/1.jpg" class="img-fluid" alt="Edu">
	   <div class="carousel-caption">
    <h3 class="text-dark">PHPTPOINT</h3>
    <p class="text-dark">Welcomes You</p>
  </div>
    </div>
    <div class="carousel-item">
       <img src="../Caraousel/2.jpg" class="img-fluid" alt="Books">
	    <div class="carousel-caption">
    <h3 class="text-danger">PHPTPOINT</h3>
    <p class="text-danger">Hello World !!</p>
  </div>
    </div>
    <div class="carousel-item">
       <img src="../Caraousel/3.jpg" class="img-fluid" alt="student">
	    <div class="carousel-caption">
    <h3>PHPTPOINT</h3>
    <p>providing best teaching</p>
  </div>
    </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>
</body>
</html>
Output:

Bootstrap Carousel Classes

Class Description
.carousel It creates a carousel effects
.carousel-indicators It provides you to add indicators to your carousel images. Indicators are the small dots in the bottom of each slides. It shows how many images are sliding and indicates the current slides.
.carousel-control-prev-icon It display the icon of previous button.
.carousel-control-next-icon It display the icon of next button..
.carousel-item By adding this class, you can display the content of each slide.
.carousel-inner It adds slides to the carousel.
.carousel-control-prev This class helps you to add previous (left) button to go back between the slides.
.carousel-control-next This class helps you to add next (right) button to go next between the slides.
.slide It provides you the transition and sliding effects.

Popular Tutorials