About Lesson
Adding Indicators and Captions in Carousel
- .carousel-indicators → Dots for navigation
- .carousel-caption → Adds text over images
Example: Carousel with Indicators & Captions
HTML
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 1 Title</h5>
<p>Description of Slide 1.</p>
</div>
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 2 Title</h5>
<p>Description of Slide 2.</p>
</div>
</div>
</div>
</div>
Output:

Explanation:
- .carousel-indicators creates dots for slide navigation.
- .carousel-caption adds text overlay.