Sometimes, we want to align a button to the bottom of card with Bootstrap and HTML.
In this article, we’ll look at how to align a button to the bottom of card with Bootstrap and HTML.
How to align a button to the bottom of card with Bootstrap and HTML?
To align a button to the bottom of card with Bootstrap and HTML, we use the align-self-end class.
For instance, we write
<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>
to add the d-flex class to the outer div to make it a flex container.
We also add the flex-column class to it to make its flex direction vertical.
Then we add the align-self-end class to align the button to the bottom of the div.
Conclusion
To align a button to the bottom of card with Bootstrap and HTML, we use the align-self-end class.
