Home >>Bootstrap Tutorial >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:

PHPTPOINT

Welcomes You

PHPTPOINT

Hello World !!

PHPTPOINT

providing best teaching

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.

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads