title: Bootstrap change $grid-gutter-width
body: <p>I am using Bootstraps grid system and I need about a <strong><code>2px</code> space between each column</strong>. I've tried Column-Gap but nothing. </p>
  
  <p>Could anyone help? </p>
  
  <p>Code HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-3" id="one"&gt;
  &lt;h3&gt;Pink&lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-3" id="two"&gt;
  &lt;h3&gt;Purple&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" id="three"&gt;
  &lt;h3&gt;Green&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" id="four"&gt;
  &lt;h3&gt;Orange&lt;/h3&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row2"&gt;
  &lt;div class="col-md-3" &gt;
  &lt;h3&gt;Things that are Pink&lt;/h3&gt;
  &lt;p&gt;Pigs&lt;/p&gt;
  &lt;p&gt;Barbie&lt;/p&gt;
  &lt;p&gt;Some Skins&lt;/p&gt;
  &lt;p&gt;Ham&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" &gt;
  &lt;h3&gt;Things that are Purple&lt;/h3&gt;
  &lt;p&gt;Prince&lt;/p&gt;
  &lt;p&gt;Goths&lt;/p&gt;
  &lt;p&gt;Paint&lt;/p&gt;
  &lt;p&gt;Berries&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" &gt;
  &lt;h3&gt;Things that are Green&lt;/h3&gt;
  &lt;p&gt;Grass&lt;/p&gt;
  &lt;p&gt;Peas&lt;/p&gt;
  &lt;p&gt;Leafs&lt;/p&gt;
  &lt;p&gt;Apple&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3" &gt;
  &lt;h3&gt;Things that are Orange&lt;/h3&gt;
  &lt;p&gt;Orange&lt;/p&gt;
  &lt;p&gt;Ice-Lolly&lt;/p&gt;
  &lt;p&gt;Essex&lt;/p&gt;
  &lt;p&gt;Carrots&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code: CSS</p>
  
  <pre><code>body {
  font-family: 'Roboto Mono', monospace;
  
  }
  
  @media screen and (min-width: 768px)
  .jumbotron {
  padding-top: 48px;
  padding-bottom: 48px;
  }
  
  .jumbotron {
  text-align: center;
  }
  
  .container {
  text-align: center;
  }
  
  #one {
  border: 5px solid pink;
  border-radius: 20px;
  background-color: pink;
  color: white;
  }
  
  #two {
  border: 5px solid purple;
  border-radius: 20px;
  background-color: purple;
  color: white;
  }
  
  #three {
  border: 5px solid green;
  border-radius: 20px;
  background-color: green;
  color: white;
  }
  
  #four {
  border: 5px solid orange;
  border-radius: 20px;
  background-color: orange;
  color: white;
  }
  
  .row2 {
  margin-top: 30px;
  margin-right: -15px;
  margin-left: -15px;
  }
  </code></pre>