CODEWITHSUNDEEP
htmlbootstrap-4alignmentvertical-alignment
Jeroen
Jeroen

Reputation: 67

Bootstrap 4: trying to align content inside a card to the bottom right

I'm trying to align my text and button inside a card to the bottom right but I can't get them to align properly.

enter image description here

This is my code: 

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
    <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay justify-items-end d-flex align-items-end">
      <h5 class="card-title">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>
</div>

And this is the result:

enter image description here

Anyone know how to fix this? Thank you for your kindness in advance!

Upvotes: 0

Views: 1179

Answers (1)

Jeroen
Jeroen

Reputation: 67

I figured it out. I fixed it by using mt-auto on the 'h5' element! This pushes the 'h5' element and 'a' element to the bottom of the card.

<div class="col-sm-3  text-right my-auto">
  <div class="card text-white text-right d-flex">
   <img src="images\col_img_2.jpeg" class="card-img" alt="...">
    <div class="card-img-overlay d-flex align-items-end flex-column">
      <h5 class="card-title mt-auto">Project 2</h5>
      <a href="#" class="btn btn-primary">Lees verder</a>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions