I have a layout using Bootstrap 4 grid to showcase some elements. I want the titles and textual content to be aligned vertically at the top, which is working fine. However, there is a <button> at the end of each grid element that I want to be vertically aligned at the bottom, in line with other <buttons> in different grid elements on the same row (responsive design).
I've come across examples of aligning everything at the bottom, but not specifically for mixing different elements. I've tried various suggestions from similar posts like this one.
Below is my HTML structure:
<div class="row services">
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h3 class="title">Element 1</h3>
<p class="description collectiontext">Element description</p>
<button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h3 class="title">Element 2</h3>
<p class="description collectiontext">Element description</p>
<button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
</div>
<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
<h3 class="title">Element 3</h3>
<p class="description collectiontext">Element description</p>
<button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
</div>
...<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div> * several
</div>
If anyone has any helpful solutions or ideas, it would be greatly appreciated.