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=".5.2/css/bootstrap.min.css">
<script src=".5.1/jquery.min.js"></script>
<script src=".js/1.16.0/umd/popper.min.js"></script>
<script src=".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>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./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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.
Share Improve this question edited May 5, 2023 at 12:49 isherwood 61.2k16 gold badges122 silver badges170 bronze badges asked Aug 16, 2020 at 11:38 YaeroxYaerox 6783 gold badges12 silver badges27 bronze badges1 Answer
Reset to default 6You were nearly there. You just need to use h-100 class to make sure the height is 100% on your card-header with d-flex
Live Demo:
<!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./bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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 d-flex align-items-center justify-content-center h-100">
<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="https://via.placeholder./150">
</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 d-flex align-items-center justify-content-center h-100">
<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="https://via.placeholder./150">
</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 d-flex align-items-center justify-content-center h-100">
<h4 class="my-0 font-weight-normal">Lorem Ipsum Lorem Ipsum </h4>
</div>
<div class="card-image">
<img class="img-fluid" src="https://via.placeholder./150">
</div>
<div class="card-body">
<ul class="list-unstyled mt-3 mb-4">
</ul>
</div>
</div>
</div>
</div>
</body>
</html>