title: Spacing Between Bootstrap Columns with Backgrounds
body: <p>I'm trying to build a grid like:</p>
  <p><img src="https://i.stack.imgur.com/oDmvg.png" alt="enter image description here" /></p>
  <p>However, because columns use paddings instead of margins, when I add a background color the columns end up touching.</p>
  <p>I could add another div within' each column and set the background on it, but I'm already not a fan of all of the added markup required by Bootstrap. Is there a clean way to accomplish this without adding a dozen extra elements?</p>
  <h3><strong>EDIT:</strong></h3>
  <p>To clarify, the grid is like a col-4, col-8... Then within' the col-8 are 3 col-4's...</p>
  <p><a href="http://jsfiddle.net/tpyvvxou/" rel="nofollow noreferrer">JSFiddle Link</a><br />
  <a href="http://jsfiddle.net/9rpxq84o/2/" rel="nofollow noreferrer">JSFiddle Link w/Wells</a> (Not a fan of the extra markup for the bg)</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-sm-4&quot;&gt;
              &lt;div class=&quot;well well-sm&quot;&gt;Left Top&lt;/div&gt;
              &lt;div class=&quot;well well-sm&quot;&gt;Left Bottom&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-sm-8&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-sm-4&quot;&gt;
                      &lt;div class=&quot;well well-sm&quot;&gt;Left/Middle&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-sm-4&quot;&gt;
                      &lt;div class=&quot;well well-sm&quot;&gt;Right/Middle&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-sm-4&quot;&gt;
                      &lt;div class=&quot;well well-sm&quot;&gt;Right Top&lt;/div&gt;
                      &lt;div class=&quot;well well-sm&quot;&gt;Right Bottom&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--end row--&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end row--&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-sm-12&quot;&gt;Other content...&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--end row--&gt;
  &lt;/div&gt;
  </code></pre>