I've been struggling to position my Title and CTA Button at the bottom (or center) of the main image div. I'm using Bootstrap 5.1 and have tried various d-flex methods without success. You can view my code on jsfiddle.
Thank you in advance for any assistance!
<div
class="d-flex align-items-stretch mb-3 rounded shadow text-center bg-image img-fluid"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.jpg');
height: 400px;
background-repeat: no-repeat;
background-size: cover;
margin-top: -1rem !important;">
<div class="mask w-100" style="background-color: rgba(0, 0, 0, 0.6);">
<div class="d-flex justify-content-center">
<!-- This section needs to go to the bottom -->
<div class="py-4 text-white">
<h1 class="mb-3">Welcome to the Tool Center!</h1>
<a class="btn btn-outline-light btn-lg" href="{{site.url}}/puppies" role="button">See our Newest Tools!</a>
</div>
</div>
</div>
</div>