title: Bootstrap padding on inner borders but not edge of browser
body: <p>I'm new at bootstrap and trying to place a simple grid of images on the webpage.  I'd like borders between the images but NOT the edges of the browser.  By default bootstrap puts padding on all 4 sides of the col-md elements.  </p>
  
  <p>I cant 'hardcode' the padding since the cells change position when the browser size changes according the responsive design.  Is there a way for bootstrap to automatically only add padding to the insides?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;
  
              &lt;img src="~/Content/images/saucer.jpg" /&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;img src="~/Content/images/metalbranch.jpg" /&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="row" &gt;
      &lt;div class="col-md-4"&gt;
          &lt;img src="~/Content/images/moon.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;img src="~/Content/images/peacockOnWood.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;img src="~/Content/images/appleGlass.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;img src="~/Content/images/pianoKeysNecklace.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-8"&gt;
          &lt;img src="~/Content/images/treeWithNecklace.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-8"&gt;
          &lt;img src="~/Content/images/gridOfCorks.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;img src="~/Content/images/trees.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.col-md-4 img, .col-md-8 img {
      width:100%;
      margin: 20px 0 0 0;
      padding: 0;
  }
  </code></pre>