About Lesson
Multi-Item Carousel (Custom Layout)
- .row → Creates grid layout
- .col-md-4 → Sets column width
- d-block w-100 → Ensures responsive images
Example: Multi-Item Carousel
HTML
<div id="multiItemCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4"><img src="image1.jpg" class="d-block w-100" alt="Slide 1"></div>
<div class="col-md-4"><img src="image2.jpg" class="d-block w-100" alt="Slide 2"></div>
<div class="col-md-4"><img src="image3.jpg" class="d-block w-100" alt="Slide 3"></div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4"><img src="image4.jpg" class="d-block w-100" alt="Slide 4"></div>
<div class="col-md-4"><img src="image5.jpg" class="d-block w-100" alt="Slide 5"></div>
<div class="col-md-4"><img src="image6.jpg" class="d-block w-100" alt="Slide 6"></div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#multiItemCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#multiItemCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Output:
Explanation:
- Uses .row and .col-md-4 to show multiple slides at once.