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 %}

wrap your `.card-title` in a div and make it position absolute and position it to bottom — Awsme Sandy, Aug 23 '17 at 09:58

score 15 · Answer 1 · answered Aug 23 '17 at 12:18

15

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

answered Aug 23 '17 at 12:18

Carol Skelly

351,302
90
710
624

5

This only works right if the image is the bottom-most object in the card. If you put a body or footer below, the title shows up overlaying the bottom content. – mwieczorek Sep 28 '17 at 10:56
That wasn't the scenario in question. The *overlay* is designed to overlay everything in the card. "Depending on the image, you may or may not need additional styles or utilities." __ the Bootstrap docs – Carol Skelly Mar 16 '18 at 16:33

score 1 · Answer 2 · answered Oct 19 '19 at 16:03

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

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

2 Answers2