Align the "Demo" & "GitHub" buttons to the bottom left of the card

Question

I want to align the "demo" and "github" button group to the bottom left of the card, I don't want it to move with the amount of text written in

tag. Please help. I am using HTML, CSS, and Bootstrap 5.

I did try vertical alignment, and justify content but, maybe I used it wrong. Please help. The photoshopped image below is the where I want the 'demo' and 'github' button group to be placed irrespective of the length of content in <p> tag

Here is my code

With the footer

Welcome to SO. Please post your code as text instead of an image. Additionally, if you could provide us with a reproducible code example, that would help people a lot to answer your question. — thomaux, Nov 25 '22 at 16:10

Arleigh Hix · Answer 1 · 2022-11-25T17:14:29.837

You just need to utilize the .card-footer, see card layout section of the docs.
Here is an example using .card-footer.bg-white.border-0 as a wrapper around your .btn-group:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="row row-cols-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/300x200.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer bg-white border-0">
        <div class="btn-group">
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
          <a href="#" class="btn btn-sm btn-outline-secondary">button</a>
        </div>
      </div>
    </div>
  </div>
</div>

This is what happened when I added the footer: https://i.stack.imgur.com/6keRi.png The footer moved with the length of the content. — Bhoami Khona, Nov 25 '22 at 18:01
@BhoamiKhona make sure `.card-footer` is not a child of `.card-body` but a sibling-of, both are immediate children of `.card` — Arleigh Hix, Nov 25 '22 at 18:25

Align the "Demo" & "GitHub" buttons to the bottom left of the card

1 Answers1