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:

1. Add d-flex to .card-body
2. Add flex-column to .card-body
3. 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.