Image showing misalignment of cards I've been struggling to align two horizontal cards so that the bottom of their images line up perfectly. This is the current HTML code I am working with:
<div class="container">
<div class="row">
<div class="col">
<div class="card w-100 d-flex flex-column">
<div class="row">
<div class="col">
<div class="card-block">
<h3 class="header">More Equipment</h3>
<hr>
<p> This is some text and more text, lots of it! </p>
<a href="#" class="btn btn-danger btn-sm">Read More</a>
</div>
</div>
<div class="col">
<img class="img-fluid w-100 h-100" src="images/airplane.jpeg" alt="">
</div>
</div>
</div>
</div>
<div class="col">
<div class="card w-100 d-flex flex-column">
<div class="row">
<div class="col">
<div class="card-block">
<h3 class="header">More Equipment</h3>
<hr>
<p> More text in this card as well, tons of content! </p>
<a href="#" class="btn btn-danger btn-sm">Read More</a>
</div>
</div>
<div class="col">
<img class="img-fluid w-100 h-100" src="images/Agility.jpeg" alt="">
</div>
</div>
</div>
</div>`
Along with the mentioned HTML, here is my CSS snippet:
.card-block {
font-size: 1.2em;
position: relative;
padding: 1em;
border-top: 1px solid rgba(34, 36, 38, .1);
box-shadow: none;
}
.card {
font-size: 1em;
overflow: hidden;
padding: 5;
border-radius: .27rem;
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 1 1px #d4d4d5;
margin-top: 25px;
}
.img {
object-fit: cover;
height: 100%;
width: 100%;
}
The current state of display can be seen in the provided image. My objective is for the images within both cards to align perfectly at their lower edges. All this work has been done utilizing Bootstrap Version 4.
I have experimented with this alternative set-up:
<div class="container">
<div class="row">
<div class="col-sm-6 d-flex align-items-stretch">
<div class="card">
<div class="row">
<div class="col-sm-6 d-flex align-items-stretch">
<div class="card-block">
<h3 class="header">More Equipment</h3>
<hr>
<p> Yet more content for this card! </p>
<a href="#" class="btn btn-danger btn-sm">Read More</a>
</div>
</div>
<div class="col-sm-6 d-flex align-items-stretch">
<img class="img-fluid d-flex w-100" src="images/airplane.jpeg" alt="">
</div>
</div>
</div>
</div>
<div class="col-sm-6 d-flex align-items-stretch">
<div class="card">
<div class="row">
<div class="col-sm-6 d-flex align-items-stretch">
<div class="card-block">
<h3 class="header">More Equipment</h3>
<hr>
<p> And additional text filling the second card entirely! </p>
<a href="#" class="btn btn-danger btn-sm">Read More</a>
</div>
</div>
<div class="col-sm-6 d-flex align-items-stretch">
<img class="img-fluid d-flex w-100" src="images/Agility.jpeg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
In this layout, the bottoms of the cards are indeed aligned; however, the first card's image doesn't extend all the way to the bottom. You can view an illustration of this issue here: First plane image not lining up with bottom of second image