html - Bootstrap - align button to the bottom of card

Question

I was peeking at one of the Bootstrap examples that use the card-deck and card classes (Pricing example). I wondered how one can fix the button alignment if one of the lists has fewer items than the others.

I would like all buttons to be vertically aligned (at the bottom of each card) but I couldn't figure out a way of doing this. I tried setting the .align-bottom class as well as wrapping the button in <div class="align-text-bottom">. I also tried several suggestions from this question about adding space however still no success (also the spacing should be variable such that it fills up the remaining space from the list).

Wrapping in <div class="card-footer bg-white"> didn't yield the desired result either as it doesn't align the button at the bottom of the card and it creates some kind of border around it.

Does anyone have an idea?

Edit: Here is a jsfiddle that resembles the problem.

Answer 1

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.