I've been working on aligning a div inside a (bootstrap v4) col within a (bootstrap v4) row that has a variable height. Here's a quick reference codepen link - https://codepen.io/ajmajma/pen/veNRdY
Here's the code snippet:
html
<div class="basket-reccomendations">
<div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
<div class="basket-reccomendations__body col-12">
<div class="row">
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__variant">variant</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__variant">Charcoal</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Name</div>
<div class="singleReccomendation__price no-variant">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
<a title="Test" class="col-6 singleReccomendation" href="">
<div class="singleReccomendation__brand">Brand</div>
<div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
<div class="singleReccomendation__variant">variant</div>
<div class="singleReccomendation__price">$10.00</div>
<div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
</a>
</div>
</div>
</div>
css (scss)
.basket-reccomendations {
background: #fff;
padding: 1rem;
margin-top: 2.5rem;
&__title {
}
&__body {
.singleReccomendation {
text-decoration: none;
&__wrapper {
max-width: 20rem;
position: relative;
margin: 0 auto;
}
&__img {
width: 15rem;
height: 15rem;
}
&__brand {
}
&__name {
}
&__variant {
}
&__price {
color: #000000;
}
&__addToBag {
text-transform: none;
margin-bottom: 2rem;
}
}
}
}
If you notice in the second row of divs - there is extra text affecting the height, and I'm aiming to align all the "add to bag" buttons to the bottom of the singleReccomendation div.
I attempted setting position relative on singleReccomendation and using position: absolute, bottom: 0 on the add to bag but it didn't work as expected. Using flex with bootstrap v4, any suggestions on the best approach to tackle this issue would be highly appreciated. Thank you!