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

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

Answer 1

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">
button
button
</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">
button
button
</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">
button
button
</div>
</div>
</div>
</div>
</div>