How to align a button always down?

Question

I’m using bootstrap version 4.0.0

I took an example here: https://getbootstrap.com/docs/4.0/examples/pricing/

How can I make a button always aligned to bass ?

You can see in jsfiddle that the "pro" card button is up, I want to keep it at the bottom to match the "free" card".

Here is the jsfiddle: https://jsfiddle.net/34shLh1m/

Answer 1

You can do using the flexbox, only if necessary to include the information (card-title and ul) in one another div. I created and named .card-info. To the card-body added the classes d-flex align-content-between flex-wrap.

Example in Jsfiddle: https://jsfiddle.net/5s2w2mkL/

Bootstrap Flex documentation (where you can find several other grid/alignment utilities): https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 2

I don’t think Bootstrap has its own classes, so you can change the classes in your CSS to always adjust the element in the bottom.

For that I created a class .embaixo to the button and adjusted the class .card as below:

.embaixo{
   position: absolute;
   left: 5%;
   bottom: 20px;
   width: 90%;
}

.card{
   padding-bottom: 40px;
}

The absolute positioning is so that the button is always on bottom, and the padding in the .card is to compensate for the difference because the absolute positioning does not influence the fluidity and can be above the text.

See on Jsfiddle.