My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements:
- All cards must be contained within a single
class="row"div. This is because the number of cards is unknown and I want the layout to adjust well across different screen sizes. - Columns within this row should have varying sizes at different breakpoints, such as
col-sm-6 col-lg-4. - Each row displayed on the screen should have cards with equal heights for uniformity.
- There should be a margin at the bottom of each card to separate them visually.
I've made good progress on this layout, but I've encountered an issue: using class="h-100" to ensure equal height removes the bottom margin from the cards.
Is there a way to make sure all cards in a displayed row have the same height while keeping a bottom margin on each card?
HTML Code :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#ff0000;">
Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#00ff00;">
Test card content. Test card content. Test card content. Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#0000ff;">
Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content.
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card h-100 mb-4" style="background-color:#0f0f0f;">
Test card content.
</div>
</div>
</div>
</div>