4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
  <div class="card bg-dark text-white">
    <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
    <div class="card-img-overlay">
      <h5 class="card-title">Title</h5>
      <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
      <div class="align-self-end">Text I want at bottom</div>
    </div>
  </div>
</div>

I am unable to get the text in the last div by applying this class align-self-end to the bottom of the image. I understand that flex has been applied to the .card-img-overlay div with the direction of column then why am I unable to get the div to the bottom of the image?

Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
Ravi Yadav
  • 637
  • 1
  • 9
  • 21
  • You can read here about how `align-self` etc. works: https://stackoverflow.com/questions/42613359/how-does-flex-wrap-work-with-align-self-align-items-and-align-content – Asons Feb 10 '18 at 20:02

1 Answers1

5

The card-img-overlay div isn't display:flex.

You can do this by adding the d-flex flex-column classes to it, and use mt-auto to push the text to the bottom.

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

<div class="card bg-dark text-white">
       <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
       <div class="card-img-overlay d-flex flex-column">
            <h5 class="card-title">Title</h5>
            <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
            <div class="mt-auto">Text I want at bottom</div>
       </div>
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Hi, that worked. But can you also tell me why align-self-end doesn't work? It aligns it to the right instead of bottom. – Ravi Yadav Feb 10 '18 at 10:33
  • It's [explained here](https://stackoverflow.com/questions/31000885/align-an-element-to-bottom-with-flexbox) and elsewhere. Basically, you could get `align-self-end` to work along with `justify-content-between` but the you'd have to restructure the card more. Auto margins are just easier. – Carol Skelly Feb 10 '18 at 10:50