引导卡覆盖，中间和底部均带有元素

Question

我用背景图片创建了一张卡片， 我使用了引导文档中的基本example，但在覆盖层中，我必须将中心一列中的元素对齐，除了最后一个必须在底部对齐的元素。

这就是我的created so far，但是对我来说，html看上去很笨拙。有没有更好的方法来达到相同的结果？喜欢较少的div或班级吗？

<div class="page-wrapper">
   <div class="card bg-dark text-white">
      <img class="card-img" src="https://placeimg.com/1000/450/nature" alt="Card image">
      <div class="card-img-overlay d-flex flex-column">
         <div class="content-wrapper container d-flex flex-grow-1 flex-column justify-content-center align-items-center">
            <p class="card-text">Last updated 3 mins ago</p>
            <h1 class="card-title">Card title</h1>
            <p class="card-text">This content is a little bit longer.</p>            
         </div>

         <ul class="nav justify-content-center">
            <li class="nav-item">
               <a class="nav-link" href="#detail">Detail</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#gallery">Gallery</a>
            </li>
         </ul>
      </div>
   </div>
</div>