I am facing an issue where I have four images of different sizes placed in 4 cards in a row. Due to the varying heights of the images, the cards appear untidy. I am looking for a way to fix this problem while ensuring that the layout remains responsive. Below is the code snippet I am currently using:
<meta name="viewport" content="width=device-width, initial-scale=1">
At the moment, I have only utilized the basic Bootstrap 5 cards template without any additional CSS. An example of how the image appears can be seen here.
The specific portion of the code related to this issue is as follows:
<div class="carousel-item active">
<img src="images/english.jpg" class="d-block w-100"
style="width: 100%; max-height: 400px; height: auto;" alt="english">
<div class="carousel-caption d-none d-md-block">
<h5>Best English class ever</h5>
<p>Won't regret to join this class</p>
</div>
</div>
My goal is to create tidy cards by making all images within them the same height dynamically. However, at the moment, I am only able to achieve one of these requirements.