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!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…