Make horizontal bootstrap 5 cards image height of the card body - html

Question

Using Bootstrap 5.1.3, how do I get the image to be the height of the card's body & footer ?
Fixing this should also put the card-footer at the bottom of the card.
Result I'm trying to achieve:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
style="object-fit: cover;">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill bg-dark">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>

Answer 1

I tend to avoid absolute positioning, but it works here above the mobile breakpoint. Add a few classes to do that (including on the parent element), and create a class for responsive image styles.
.fit-cover {
object-fit: cover;
}
#media (min-width: 768px) {
.fit-cover {
position: absolute;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4 position-relative">
<img src="https://via.placeholder.com/600" class="card-img fit-cover w-100 h-100" alt="...">
</div>
<div class="col-sm-8">
<div class="card-body">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill bg-dark">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>

Answer 2

you asked to make > cards image height of the card body.
but according to me the content should follow the height of image.
To achieve the result as in your screen shot I have added
style="height: calc(100% - 41px);"
to card-body reducing the footer height. it will now take full height of parent element. check if this solves your problem If there anything else let me know
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
<div class="card">
<div class="row g-0">
<div class="col-sm-4">
<img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
style="object-fit: cover;">
</div>
<div class="col-sm-8">
<div class="card-body" style="height: calc(100% - 41px);">
<h5 class="card-title">
<a class="link-dark text-decoration-none" href="#" target="_blank">Card
Title</a>
</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<span class="badge rounded-pill text-bg-secondary">Tag1</span>
</div>
<div class="card-footer text-end text-muted">
Last updated today.
</div>
</div>
</div>
</div>
</div>

Answer 3

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col card" style="flex-direction: row;">
<div class=" h-100">
<img src="https://img.freepik.com/free-psd/futuristic-glow-t…ect-psd-editable-template_53876-115831.jpg?w=2000" class="card-img-top" alt="..." style="width: 240px;">
</div>
<div>
<div class="card-body px-2 py-2 p-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="border-top">
<small>Update 2min ago</small>
</div>
</div>
</div>
</div>
</div>