Bootstrap Carousel
A Carousel is a slideshow. It displays one picture or piece of content at a time and changes it automatically or when a user clicks a button. It’s useful for banners, image galleries, or featured content
Basic Carousel (without Captions)
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Carousel Example</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”https://via.placeholder.com/800×400?text=Slide+1″ class=”d-block w-100″ alt=”Slide 1″>
</div>
<div class=”carousel-item”>
<img src=”https://via.placeholder.com/800×400?text=Slide+2″ class=”d-block w-100″ alt=”Slide 2″>
</div>
</div>
<!– Navigation buttons –>
<a class=”carousel-control-prev” href=”#myCarousel” 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=”#myCarousel” role=”button” data-slide=”next”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Output:
🧾 Short Explanation:
- carousel slide – Makes the slider work.
- data-ride=”carousel” – Starts the carousel automatically.
- .carousel-inner – Holds the slides.
- .carousel-item – One slide.
- .active – The first slide that shows first.
- img tag – Shows the image.
- Prev/Next Buttons – Help move to the previous/next slide.
Carousel with Captions
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Carousel with Captions</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div id=”captionCarousel” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<img src=”https://via.placeholder.com/800×400?text=Slide+1″ class=”d-block w-100″ alt=”Slide 1″>
<div class=”carousel-caption d-none d-md-block”>
<h5>First Slide</h5>
<p>This is the first slide caption.</p>
</div>
</div>
<div class=”carousel-item”>
<img src=”https://via.placeholder.com/800×400?text=Slide+2″ class=”d-block w-100″ alt=”Slide 2″>
<div class=”carousel-caption d-none d-md-block”>
<h5>Second Slide</h5>
<p>This is the second slide caption.</p>
</div>
</div>
</div>
<!– Controls –>
<a class=”carousel-control-prev” href=”#captionCarousel” 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=”#captionCarousel” role=”button” data-slide=”next”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>
</html>
Output:
Explanation:
- .carousel-caption – Used to write text on the image (title and description).
- d-none d-md-block – Hides the text on small screens, shows on medium+ screens.
Conclusion
Bootstrap Carousel lets you create a responsive image or content slider. You can add captions, controls, and indicators easily using Bootstrap’s ready-made classes. It works great on all screen sizes and needs only HTML + Bootstrap CSS & JS.
Practice Scenarios:
Scenario1️: Carousel with 3 Slides
Objective:<!-- just add another. carousel-item with image inside carousel inner-->
Expected Output:
2. Carousel with Button in Caption
Objective: Add a button inside the caption (.carousel-caption) of each slide
Expected Output:
A Bootstrap carousel is a slideshow component for cycling through a series of content, such as images or text, within a responsive layout.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Use the .carousel class and include elements like .carousel-inner and .carousel-item. Refer to our tutorial for step-by-step instructions.
Yes, Bootstrap allows you to include multiple items per slide using custom classes and JavaScript. Learn more in our examples section.
Examples include carousels with captions, indicators, and control buttons for navigation.
Bootstrap carousels are inherently responsive. Use the .d-block and .w-100 classes to ensure proper scaling across devices.
es, captions can be added using the .carousel-caption class.
Bootstrap’s JavaScript library handles the carousel’s functionality, including autoplay, transition effects, and controls.
A static carousel displays predefined content, while a dynamic carousel fetches and displays content programmatically.
Yes, a Hindi version of the Bootstrap carousel tutorial is available for better accessibility.
