How do I prevent Bootstrap carousel items from resizing when the window is resized?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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:

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.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I prevent Bootstrap carousel items from resizing when the window is resized?

Asked on Oct 28, 2025

Answer

The Q&A Network