I'm in the process of designing a website that features a horizontal bootstrap card. I'm trying to figure out how to make the image on the left side of the card fill the full height of that section. Here's the code I'm working with:
<div
class="card mb-3 card_focus"
style="max-width: 60rem; height: 100%"
>
<div class="row no-gutters">
<div class="col-md-4">
<div
class="card text-white bg-primary mb-3 d-flex"
style="max-width: 100%; height: 20rem"
>
<div class="card-body">
<i class="fas fa-file-code"></i>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<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>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>
And here's the related CSS code I've been using:
#main_cont div div i {
align-items: center;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: clamp(70px, 6vw, 200px);
}
This is how the layout currently looks:
https://i.sstatic.net/NUYOE.png