CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
ArturGalstyan
ArturGalstyan

Reputation: 3

Bootstrap 5: Carousel inside Card won't maintain the same size

The problem is shown in this GIF:

https://gifyu.com/image/B5nC

I'm using Bootstrap 5 to have a carousel inside a card. Although the images are shown properly, the card resizes as the images change. I want to prevent that and have a constant size for all the images.

Here's the relevant code:

           <div class="col">
                <div class="card h-100">
                    <div class="card-img-top w-100">
                        <div id="carouselExampleControls" class="carousel slide >
                            <div class="carousel-inner">
                                <div class="carousel-item active
                                    <img src="1.png" class="d-block w-100 " alt="..." >
                                </div> 
                                <div class="carousel-item active
                                    <img src="2.png" class="d-block w-100 " alt="..." >
                                </div>
                                <div class="carousel-item active
                                    <img src="3.png" class="d-block w-100 " alt="..." >
                                </div>

                            </div>
                            <Button stuff, not so important...>
                        </div>
                    </div>

                    
                    <div class="card-body">
                        <h5 class="card-title">a title</h5>
                        <p class="card-text">Some text.</p>
                    </div>
                    <div class="card-footer">
                        Some Text here.
                    </div>
                </div>
            </div>

Any ideas?

Upvotes: 0

Views: 2426

Answers (1)

Mark
Mark

Reputation: 783

What you'd want to do, is add a fixed height or width to the image.

Add some css to the img tag. With that you can adjust the height of the image and center the image. Something like so:

.carousel img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

The object-fit: cover; makes it so that the image will fit and not being stretched out. With object-position: center; it centers the image of the view. In this case it centers image on the height of 220px.

Here's a working example: https://www.codeply.com/p/y86ZKljAZS

Upvotes: 2

Related Questions