Bootstrap - align button to the bottom of card
A similar question has been answered here.
Just add the align-self-end
class to item to align at the bottom.
https://www.codeply.com/go/Fiorqv1Iz6
<div class="card-body d-flex flex-column">
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li>
<li>10 GB of storage</li>
</ul>
<button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
</div>
By default, the card
is display:flex, but the card-body
is not. Because of this you need to add d-flex flex-column
to the card-body
. This will make the flexbox alignment classes work.
Another option is to use mt-auto
(auto top margin) on the button which will push it to the bottom of the Card.
You can use the following Bootstrap 4 modifier classes:
- Add
d-flex
to.card-body
- Add
flex-column
to.card-body
- Add
mt-auto
to.btn
nested in.card-body
fiddle
Refer to this page for a full list of flexbox modifying classes for Bootstrap 4.