I'm using bootstrap cards on two web-pages. On one page, the header-text is fixed so I can use min-height to match their card-header height. On the second page, those cards will be generated so I won't know the text length and the words. I want the card-header to be the same height for all in a row.
Is there any way to calculate min-height based on the biggest card-header withing a row?
I'm already using card-deck. As far as I know this is for the height of the whole card, my issue here is the card-header. The cards in general all have the same height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-deck my-3 text-center">
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum</h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header align-items-center d-flex
justify-content-center card-header-height">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="img_avatar1.png">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>Update I had the same issue after adding a list (ul) and list-items (li) into the card-body. Took me some hours to figure out why the card-header height doesn't work anymore then. Make sure your li text is similar in length. One of my li was too long so it was 2-lines which screws the overall look of the card-headers again.