Check out the issue in this GIF:
I am currently using Bootstrap 5 to incorporate a carousel within a card. However, as the images transition, the card size changes accordingly. My goal is to maintain a consistent size for all images without any resizing of the card.
Below is the relevant code snippet:
<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>
Does anyone have any suggestions on how to solve this?