How do I always align a button down?

Navigation
1

I'm using bootstrap version 4.0.0

I've taken an example here: link

How can I make a button always aligned to down ?

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

Here's jsfiddle: link

    
asked by anonymous 13.02.2018 / 00:18

2 answers

1

I do not think Bootstrap has its own classes for this, so you can change the classes in your CSS to always adjust the bottom element.

For this I created a class .embaixo for the button and set the class .card as below: 

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

.card{
   padding-bottom: 40px;
}

The absolute positioning is for the button to always be in the bottom , and the padding in the .card is to compensate for the difference because the absolute positioning does not affect the fluidity and can be over of the text.

View in JSFiddle .

    
13.02.2018 / 00:55
2

You can do this by using flexbox , only requiring that you include the information ( card-title and ul ) in another div . I created it and named it .card-info . At card-body I added the d-flex align-content-between flex-wrap classes.

Example in JSFIddle: link

Bootstrap Flex documentation (where you can find several other grid / alignment utilities): link

p>     
16.02.2018 / 14:37
Changing site color via GET parameter Mount SQL with options