title: How to add vertical spacing between Bootstrap Cards
body: <p>I am working with boostrap cards, and the following is what I have them currently looking like:
  <a href="https://i.stack.imgur.com/LstAX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LstAX.png" alt="enter image description here"></a></p>
  
  <p>Now what I'd like to do is add vertical space between the cards so that Card 1 and Card 3 aren't stuck together as well as Card 2 and Card 4.</p>
  
  <p>The following is my code and setup for the cards I currently have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;div class="card"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;CARD 1&lt;/h5&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;div class="card"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;CARD 2&lt;/h5&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;div class="card"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;CARD 3&lt;/h5&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;div class="card"&gt;
          &lt;div class="card-body"&gt;
            &lt;h5 class="card-title"&gt;CARD 4&lt;/h5&gt;
            &lt;p class="card-text"&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
            &lt;a href="#" class="btn btn-primary"&gt;Go somewhere&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>