Menu
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.
940
The easiest and most efficient approach to align a button at the bottom of a div is to make use of CSS position property. so that the button could be positioned relative to its parent.
We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.
The close icon gets nicely positioned within the card-header and the negative margins pull the card content closer into the header area. To actually close the card we can make use of the BS4 Data-API and put the the following data attributes in the button tag: data-dismiss="alert" data-target="#closeablecard" .
You can use the following Bootstrap 4 modifier classes:
d-flex to .card-body flex-column to .card-body mt-auto to .btn nested in .card-body fiddle
Refer to this page for a full list of flexbox modifying classes for Bootstrap 4.
106
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
