Bootstrap 5 Carousel With Controls

Last Updated : 23 Jul, 2025

Bootstrap 5 Carousel With controls means we can add controls to the Carousel for changing the slides of the carousel.

Note: This can be achieved using HTML <button> as well as HTML <a> tag.

Bootstrap 5 Carousel With Controls Classes:

carousel-control-prev: This class is used for the carousel previous control.
carousel-control-next: This class is used for the carousel next control.
carousel-control-prev-icon: This class is used for the carousel previous icon image.
carousel-control-next-icon: This class is used for the carousel next icon image.

Syntax:

<button class="carousel-control-prev" type="button"
 data-bs-target="#GFG" data-bs-slide="prev">
 <span class="carousel-control-prev-icon" aria-hidden="true">
 ...
 </span>
 <span class="visually-hidden">...</span>
</button>

Example 1: In this example, we will learn about Carousel Controls using the HTML <button> tag.

HTML

<!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">  </script> </head> <body class="m-2 text-center"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Bootstrap 5 Carousel With controls</h3> <div id="GFG" class="carousel slide carousel-fade" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" height="400px" width="400px" alt="Java" class="d-block w-100"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height="400px" width="400px" alt="HTML" class="d-block w-100"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" height="400px" width="400px" alt="Angular" class="d-block w-100"> </div> <button class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </button> <button class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </button> </div> </div> </div> </body> </html>

Output:

Example 2: In this example, we will learn about Carousel Controls using an HTML <a> tag. We need to add role="button" in <a> tag.

HTML

<!DOCTYPE html> <html> <head> <!-- Bootstrap CDN --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">  </script> </head> <body class="m-2 text-center"> <div> <h1 class="text-success"> GeeksforGeeks </h1> <h3>Bootstrap 5 Carousel With Controls</h3> <div id="GFG" class="carousel slide carousel-fade" data-ride="carousel"> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" height="400px" width="400px" alt="Java" class="d-block w-100"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" height="400px" width="400px" alt="HTML" class="d-block w-100"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" height="400px" width="400px" alt="Angular" class="d-block w-100"> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev" role="button"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next" role="button"> <span class="carousel-control-next-icon"> </span> </a> </div> </div> </div> </body> </html>