I have some pricing card on my website and I was looking at a way to keep all my card the same height with the site responsive. I was able to keep all the card the same height using d-flex and align-items-stretch but now my issue is when the card shrink, the header text become 2 lines and the body text also get on multiple line. Is there a way to keep the card header, body and footer the same height?Example
<div class="col-lg-4 mb-4 d-flex align-items-stretch">
<div class="card shadow border-purple w-100">
<div class="card-header py-3 text-white bg-purple border-purple d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 fw-normal"><?php echo $lang['price_card2']; ?></h4>
</div>
<div class="card-body d-flex flex-column">
<h4><?php echo $lang['price_subtitle1']; ?></h4>
<h1 class="card-title pricing-card-title">124.99$<small class="text-muted fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li><?php echo $lang['price_card2_item1']; ?></li>
<li><?php echo $lang['price_card1_item2']; ?></li>
<li><?php echo $lang['price_card1_item3']; ?></li>
<li><?php echo $lang['price_card1_item4']; ?></li>
<li><strong><?php echo $lang['price_subtitle4']; ?></strong></li>
</ul>
</div>
<div class="card-footer">
<?php echo $lang['price_card_info1']; ?><br /><a href="<?php echo $lang['url_price_list'] ?>" target="_blank"><?php echo $lang['price_card_info2']; ?></a>
<a href="<?php echo $lang['url_rendez'] ?>" class="w-100 btn btn-lg btn-white-to-purple mt-3" target="_blank"><?php echo $lang['price_card_button1']; ?></a>
</div>
</div>
</div>
I was able to use d-flex align-items-center justify-content-center h-100 in the header, it does work to match the header height but not when one of the card header text become 2 lines.
