title: Bootstrap 4 adding gutters to columns is it possible?
body: <p>I've been scouring the web looking for an answer but I can't seem to find a answer regarding adding gutters to columns in BS4. Any articles I find that talk about adding gutters are referencing BS3. Even the BS4 Docs talk about removing them, but as far as I can tell there isn't any, right?</p>
  
  <p>Is it even possible to add equal gutters that don't cause cols to break and wrap? If so how would you do it without messing with flex box?</p>
  
  <p>I have a <a href="https://jsfiddle.net/Beaniie/s8rm1f0q/5/" rel="noreferrer">JsFiddle</a> demonstrating the grid I'm trying to add gutters to. Any help I could get, or even if I could be pointed in the right direction I'd be grateful.</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>.sec-accent {
    background-color: #fafcf5;
  }
  
  .blue {
    background-color: #9999cc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
        &lt;div class="col-sm-8 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
        &lt;div class="col-sm-4 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
        &lt;div class="col-sm-4 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-6 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
        &lt;div class="col-sm-6 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 blue" style="height:500px;"&gt;
          Hello World
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>EDIT: 9 April 2018</strong></p>
  
  <p>I can see where I have mis-interpreted bootstrap gutters now and after some more digging I was able to come up with a solution to my problem.</p>
  
  <blockquote>
    <p>Added here in this <a href="https://jsfiddle.net/Beaniie/s8rm1f0q/11/" rel="noreferrer">JsFiddle</a> for anyone looking for a solution like mine.</p>
  </blockquote>
  
  <p>Thanks again for the assistance.</p>
  
  <p>Regards, -B.</p>