css - Bootstrap cards with 100% height and margin bottom

Question

I am attempting to develop a grid of Bootstrap 4 cards with the following requirements:

• All cards must sit within one div class="row", because I don't know how many cards there will be total and I want rows to look good at different screen breakpoints.
• Columns within this row are sized differently at different breakpoints (e.g., col-sm-6 col-lg-4).
• Within any individual 'displayed row', e.g., one row of cards shown on the screen at any given time, each card should have the same height.
• Each card should have a margin at its bottom so that it is separated from all other cards.

I've managed to get almost all the way there, but I'm running into a problem: setting class="h-100" on my cards to ensure that they are all the same height kills the margin from the bottom of each card.

Is there a way to ensure that all cards within any given displayed row are the same height, while preserving a margin at the bottom of them?

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>

JSFiddle Demo

Answer 1

After a little bit of experimentation, this one was easy to solve: I needed to add the mb-4 class to the containing column, not the card itself:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6 mb-4">
      <div class="card h-100" 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 mb-4">
      <div class="card h-100" 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 mb-4">
      <div class="card h-100" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>

Hopefully this helps others out who are stuck in my same situation.