Как заставить некоторый контент .card-img-overlay выравниваться внизу?

Question

У меня есть серия карт Bootstrap 4 внутри столбцов, подобных этой ...

<div class="col-6 pb-md-4">
<a href="http://www.example.com/link.html" class="card bg-dark text-white shadow-sm border-0">
  <img class="card-img" style="opacity: .25" src="http://res.cloudinary.com/braincloud/image/fetch/w_500,h_350,c_thumb,g_faces/http://www.example.com/wp-content/uploads/cnn-thumbnail-4-1024x576.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Charged News Environment Powering Marketing Engagement: CNN’s Andrew Morse</h4>
    <p class="card-text">Last updated 3 mins ago</p>
    <span class="badge badge-danger font-weight-normal mr-2">Executive Views</span>
  </div>
</a>
</div>

Как можно выровнять абзац изначок в нижней части карты, при этом удерживая заголовок выровненным по верху?

Answer 1

Используйте служебные классы flexbox на оверлее карты.d-flex flex-column на оверлее.Затем mt-auto, чтобы сдвинуть абзац вниз.

   <div class="row">
        <div class="col-6 pb-md-4">
            <a href="https://www.beet.tv/2019/01/cnn.html" class="card bg-dark text-white shadow-sm border-0">
                <img class="card-img" style="opacity: .25" src="http://res.cloudinary.com/braincloud/image/fetch/w_500,h_350,c_thumb,g_faces/http://www.contexthq.com/wp-content/uploads/cnn-thumbnail-4-1024x576.jpg" alt="Card image">
                <div class="card-img-overlay d-flex flex-column align-items-start">
                    <h4 class="card-title">Charged News Environment Powering Marketing Engagement: CNN’s Andrew Morse</h4>
                    <p class="card-text mt-auto">Last updated 3 mins ago</p>
                    <span class="badge badge-danger font-weight-normal mr-2">Executive Views</span>
                </div>
            </a>
        </div>
    </div>

https://www.codeply.com/go/dJxBV5rDhv