title: Adding space between columns in Bootstrap 4
body: <p>How I want it to look like: </p>
  
  <p><a href="https://i.stack.imgur.com/Hrlv4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hrlv4.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to add horizontal and vertical space between the columns in BS4 but it keeps either messing breakpoints around (black or red) or the breakpoints of bootstrap. Is there any easy way to add space? I've tried the new margin settings of BS4, but it didn't really help (messed up the heading and background-color). Also, the 2 horizontal columns should have the same height.</p>
  
  <p>btw. If you run the snippet, the columns don't display correctly because of the size of the snippet output. That's what it should look like on non-mobile: <a href="https://i.stack.imgur.com/0tQ61.png" rel="noreferrer">screenshot</a> (or expand the snippet)</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-css lang-css prettyprint-override"><code>* {
    color: white;
  }
  
  .black {
    background-color: black;
  }
  
  .red {
    background-color: red;
  }
  
  nav {
    background-color: antiquewhite;
    margin: 0px;
  }
  
  .row {}
  
  .head {
    background-color: aqua;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" &gt;
  &lt;nav class="navbar-static-top"&gt;
    Nav
  &lt;/nav&gt;
   &lt;div class="container-fluid"&gt;
          &lt;div class="row p-1"&gt;
              &lt;div class="col black"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col head"&gt;
                          HEADING 0 COLUMN
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;p&gt;aaaa&lt;br&gt;
                  aaaa&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row row-eq-height p-1"&gt;
              &lt;div class="col-md-6 black"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col head"&gt;
                          HEADING 1 COLUMNS BLACK
                      &lt;/div&gt;
                  &lt;/div&gt;bbbb&lt;br&gt;
                  bbbb&lt;br&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 red"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col head"&gt;
                          HEADING 2 CLOUMNS RED
                      &lt;/div&gt;
                  &lt;/div&gt;cccc
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row p-1"&gt;
              &lt;div class="col black"&gt;
                  dddd
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row p-1"&gt;
              &lt;div class="col black"&gt;
                  eeee
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row row-eq-height p-1"&gt;
              &lt;div class="col-md-6 black"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col head"&gt;
                          HEADING 3 COLUMNS BLACK
                      &lt;/div&gt;
                  &lt;/div&gt;ffff&lt;br&gt;
                  ffff&lt;br&gt;
              &lt;/div&gt;
              &lt;div class="col-md-6 red"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col head"&gt;
                          HEADING 4 CLOUMNS RED
                      &lt;/div&gt;
                  &lt;/div&gt;hhhh
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>