Bootstrap Spacing Utility (mt-auto) for Positioning div at Bottom of parent Container Not Working

Below I have a simple example where I have a "container" and 2 "row" div's inside. I'd like to have the first "row" containing the <h1> stay at the top as it does by default. I'd like the second "row" containing the 3 feature "col" to be positioned at the bottom of the container. I am using Bootstrap 4.6

In the example below, I've used the "mt-auto" utility and I would have expected it to work and it appears that I am doing something wrong. Do I need to specify a "position" in the CSS? Is there some other CSS I need to specify? for reference the Bootstrap 4.6 spacing documentation is here: Bootstrap 4.6 Spacing Utility Documentation

I have also tried the flex approach with the "align-self-end" and that does not seem to work either. Do I need to add "d-flex" to the "row" or "container"? for reference the Bootstrap 4.6 flex documentation is here: Bootstrap 4.6 Flex Documentation

I have tried a variety of things and searched stack overflow and I have not been able to resolve this. Any help on one of both approaches would be greatly appreciated. Thank you.

.hero {
 height: 400px;
 background-color: #ccc;
 }
 
 .row {
  border: 1px solid #999;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="hero">
  
  <div class="container">

    <div class="row">
      <div class="col">
        <h1>Page Title</h1>
      </div>
    </div>

    <div class="row mt-auto">
      <div class="col">
        Feature 1
      </div>
      <div class="col">
        Feature 2
      </div>
      <div class="col">
        Feature 3
      </div>
    </div>
  
  </div>
  
</div>

Solution

Your .container is not filling the vertical space, it needs .h-100 to match the parent height. Then add .d-flex & .flex-column.

.hero {
  height: 400px;
  background-color: #ccc;
}

.row {
  border: 1px solid #999;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="hero">

  <div class="container h-100 d-flex flex-column">

    <div class="row">
      <div class="col">
        <h1>Page Title</h1>
      </div>
    </div>

    <div class="row mt-auto">
      <div class="col">
        Feature 1
      </div>
      <div class="col">
        Feature 2
      </div>
      <div class="col">
        Feature 3
      </div>
    </div>

  </div>

</div>