title: Bootstrap cards with 100% height and margin bottom
body: <p>I am attempting to develop a grid of Bootstrap 4 cards with the following requirements:</p>
  
  <ul>
  <li>All cards must sit within one div <code>class="row"</code>, because I don't know how many cards there will be total and I want rows to look good at different screen breakpoints.</li>
  <li>Columns within this row are sized differently at different breakpoints (e.g., <code>col-sm-6 col-lg-4</code>).</li>
  <li>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.</li>
  <li>Each card should have a margin at its bottom so that it is separated from all other cards.</li>
  </ul>
  
  <p>I've managed to get almost all the way there, but I'm running into a problem: setting <code>class="h-100"</code> on my cards to ensure that they are all the same height kills the margin from the bottom of each card.</p>
  
  <p>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?</p>
  
  <p><strong>HTML Code :</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;div class="card h-100 mb-4" style="background-color:#ff0000;"&gt;
          Test card content. 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;div class="card h-100 mb-4" style="background-color:#00ff00;"&gt;
          Test card content. Test card content. Test card content. Test card content. 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;div class="card h-100 mb-4" style="background-color:#0000ff;"&gt;
          Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. 
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;div class="card h-100 mb-4" style="background-color:#0f0f0f;"&gt;
          Test card content. 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mbczv32c/1/" rel="noreferrer"><strong>JSFiddle Demo</strong></a></p>