Bootstrap 4 cards - align content at the bottom
Use the flexbox utils and/or auto margins. For example, you can make the .card-body
display:flex
(d-flex flex-column
) and the margin-top:auto
(mt-auto
) to push the button down...
https://codeply.com/go/mfrRHlgydc
<div class="card-group">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
...
</div>
</div>
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body d-flex flex-column">
<div>
Line 1
</div>
<div>
Line 2
</div>
<div>
Line 3
</div>
<div class="mt-auto">
<input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
</div>
</div>
<div class="card-footer">
..
</div>
</div>
</div>
Related questions:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox
Gonzalo
Updated on June 07, 2022Comments
-
Gonzalo almost 2 years
I have a group of bootstrap cards put together in a card-group, meaning they all have the same width and height. Each card's content is different in height, and I need a button aligned at the bottom of each card (not the card's footer, i have other content there). I tried adding 'artificial' blank space in each card so they all match, but that breaks when resizing the window. Any ideas? Here's the relevant code.
<div class="card-group"> <div class="card"> <div class="card-header"> Header </div> <div class="card-body"> <div> Line 1 </div> <div> Line 2 </div> <div> Line 3 </div> <div> <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /> </div> </div> <div class="card-footer"> Footer </div> </div> <div class="card"> <div class="card-header"> Header </div> <div class="card-body"> <div> Line 1 </div> <div> Line 2 </div> <div> <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /> </div> </div> <div class="card-footer"> Footer </div> </div> <div class="card"> <div class="card-header"> Header </div> <div class="card-body"> <div> Line 1 </div> <div> Line 2 </div> <div> Line 3 </div> <div> Line 4 </div> <div> <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" /> </div> </div> <div class="card-footer"> Footer </div> </div> </div>
Thanks!