I am working on a shopping cart for a site using Bootstrap 5.2.3, and I have some code for a product page using Bootstrap cards. The problem is, I can't get the card sections (image, header, and body) to size to the same height. Here is the code:
<section class="bg-light pt-5 pb-5 shadow-sm">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="http://www.azspagirls.com/files/2010/09/orange.jpg" class="card-img-top h-100" alt="Card Image">
<div class="card-header d-flex flex-row fs-4 text-center h-100">A Test Item with long description to see if it works</div>
<div class="card-body d-flex flex-column">
<p class="card-text mb-4">
Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.
</p>
</div>
<div class="card-footer">
<div class="d-flex flex-row justify-content-between mb-1">
<span class="fs-4 fcDarkGreen">$.50 ea</span>
<a href="#" data-name="Orange" data-stockno="a1" data-price=".50" class="add-to-cart btn btn-primary">Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/28PqLLQC/dotonburi-canal-osaka-japan-700.jpg" class="card-img-top h-100" alt="Card Image">
<div class="card-header d-flex flex-row fs-4 text-center h-100">Banana</div>
<div class="card-body d-flex flex-column">
<p class="card-text mb-4">
This is where the description of a banana would go
</p>
</div>
<div class="card-footer">
<div class="d-flex flex-row justify-content-between mb-1">
<span class="fs-4 fcDarkGreen">$1.22 ea</span>
<a href="#" data-name="Banana" data-stockno="b1" data-price="1.22" class="add-to-cart btn btn-primary">Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3 d-flex align-items-stretch">
<div class="card">
<img src="https://i.postimg.cc/TYyLPJWk/tritons-fountain-valletta-malta-700.jpg" class="card-img-top h-100" alt="Card Image">
<div class="card-header d-flex flex-row fs-4 text-center h-100">Lemon</div>
<div class="card-body d-flex flex-column">
<p class="card-text mb-4">
This is where the description of a lemon would go.
</p>
</div>
<div class="card-footer">
<div class="d-flex flex-row justify-content-between mb-1">
<span class="fs-4 fcDarkGreen">$5.00 ea</span>
<a href="#" data-name="Lemon" data-stockno="c1" data-price="5.00" class="add-to-cart btn btn-primary">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The product title, which is to be displayed in the header, may sometimes be long enough to overflow to the next line (especially on smaller screens), but I still want a consistent look to each card. The description, to be displayed in the card body, may also be shorter or longer, so I need to make sure those sections all have a uniform height as well. Can anyone help, please? Thank you!
