How do I prevent Bootstrap carousel items from resizing when the window is resized?
Asked on Oct 28, 2025
Answer
To prevent Bootstrap carousel items from resizing when the window is resized, you can set a fixed width and height for the carousel items. This ensures that the items maintain their dimensions regardless of the window size.
<!-- BEGIN COPY / PASTE -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="width: 600px; height: 400px;">
<img src="image1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="width: 600px; height: 400px;">
<img src="image2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="width: 600px; height: 400px;">
<img src="image3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- Set a fixed `width` and `height` for each `.carousel-item` to prevent resizing.
- Ensure the images inside the carousel items are set to `class="d-block w-100"` to fill the item container.
- Replace `image1.jpg`, `image2.jpg`, and `image3.jpg` with your actual image paths.
Recommended Links: