Css 引导4 jumbotron内div的垂直对齐底部

我已经看到了很多关于中间垂直对齐的答案，但我找不到一个关于jumbotron内部div底部对齐的答案

<section id="profileHero">
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="jumbotron jumbotron-fluid rounded d-flex align-items-end align-bottom">
        <div class="profileHeader rounded p-3">
          <h3 class="display-4">[profile name]</h3>
          <p class="lead">[profile location]</p>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

---

我希望将profileHeader div缩进左下角，然后我可以将其与ml-2、mb-2等一起向上和向内移动。

由于某些原因，d-flex类不起作用（我尝试在控制台中显示：flex，然后它就起作用了），而且垂直对齐只有在垂直轴上有额外空间时才起作用（例如，如果定义的高度大于内容）或者如果容器中有多个元素且其高度不同，则外部容器会适应内部容器的高度。

尝试

样式=“位置：绝对；底部：0；

@xNoJustice-这只是将jumbotron缩小到包含文本的div大小

  .jumbotron {
     background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)), url("./assets/images/image.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     max-height: 45vh;
    -webkit-filter: brightness(100%);
  }
 .jumbotron img {
    -webkit-filter: none;
  }
 .profileHeader {
    background-color: rgb(0,0,0); /* fallback */
    background-color: rgba(0,0,0, 0.4); /* overlay */
    color: white;
  }