How to get a Div section to Float to the bottom (or center) of another Div using Bootstrap 5-CodePudding

I am having an extremely challenging time moving my Title and CTA Button to reside at the bottom (or center) of the main image div, I am using the latest bootstrap 5.1 and have tried various d-flex methods to no avail. Here is my jsfiddle and my code below.

Many thanks for any help!

<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>

CodePudding user response：

Try setting the d-flex align-items-center justify-content-center to the div with class=mask w-100. then the div just below it becomes redundant.