How do I position text on the bottom of an image overlay in a card in Bootstrap 4

Question

I am using Bootstrap 4 and cards with image overlay to put some text over the image. The text appears on the top of the image, while I want it to be at the bottom.

This is the html code for the cards:

 <div class="card-deck">
      {% for article in article_list|slice:":3" %}
      <div class="card card-inverse align-self-center">
          <div class="card-header text-center">
            {{ article.category|capfirst }}
          </div>
        <img class="card-img" src="{% static article.image %}" alt="Card    image cap">
        <div class="card-img-overlay">
            <h4 class="card-title">{{ article.title }}</h4>
        </div>
      </div>
    {% endfor %}

Answer 1

Make the card-img-overlay display flex using d-flex, and then justify-content-end to align at the bottom..

       <div class="card bg-inverse">
              <div class="card-header text-center">
                    Category
              </div>
              <img class="card-img" src="//placehold.it/400" alt="Card image cap">
              <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
                    <h4 class="card-title">Title</h4>
              </div>
       </div>

Demo: https://www.codeply.com/go/7tnRTddIh6

More on vertical align in Bootstrap 4

Answer 2

If you want to align overlay vertically the simplest solution is to add d-flex and align-items-end to card-img-overlay. This will move h3 to the bottom of the card

<div class="card bg-inverse">
   <div class="card-header text-center">
      Category
   </div>
   <img class="card-img" src="//placehold.it/400" alt="Card image cap">
   <div class="card-img-overlay d-flex align-items-end">
      <h4 class="card-title">Title</h4>
   </div>
</div>

If you want you can read more about aligning items vertically in bootstrap look here:

Bootstrap 4 Align-items

On css-tricks.com you can find amazing guide how the flexbox behaves - check here: A Complete Guide to Flexbox