How to align a button to the bottom of card with Bootstrap and HTML?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *