title: How to reduce gap between bootstrap columns
body: <p>I have this code which displayes 4 items in a row. I have given the columns border to give you an idea about the size of each column.
  Inside each column there is a wrapper of fixed width and height which displays the image and text. Now is it possible to reduce the gap between columns for large devices ?
  <a href="https://jsfiddle.net/3j6x1fou/" rel="nofollow noreferrer">https://jsfiddle.net/3j6x1fou/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
      &lt;style type="text/css"&gt;
          .green {
              border: 1px solid green;
          }
          .blue {
              border: 1px solid blue;
          }
          .orange{
              border: 1px solid orange;
          }
          .yellow {
              border: 1px solid yellow;
          }
  
          .size {
  
          }
  
          .wrapper {
              width: 180px;
              height: 200px;
          }
  
          .inherit {
              width: inherit;
              height: inherit;
          }
  
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-4 col-md-3 mt-5 mt-md-0 green"&gt;
              &lt;div class="wrapper" style="margin: 0 auto;"&gt;
              &lt;img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg"&gt; 
              &lt;div&gt;Xtres Watch R007&lt;/div&gt;     
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4 col-md-3 mt-5 mt-md-0 blue"&gt;
              &lt;div class="wrapper" style="margin: 0 auto;"&gt;
             &lt;img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg"&gt;
             &lt;div&gt;Xtres Watch R007&lt;/div&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4 col-md-3 mt-5 mt-md-0 orange"&gt;
              &lt;div class="wrapper" style="margin: 0 auto;"&gt;
            &lt;img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg"&gt;
            &lt;div&gt;Xtres Watch R007&lt;/div&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4 col-md-3 mt-5 mt-md-0 yellow"&gt;
              &lt;div class="wrapper" style="margin: 0 auto;"&gt;
            &lt;img class="img-fluid inherit" src="https://i.redd.it/dkcm8of8x9b01.jpg"&gt;
            &lt;div&gt;Xtres Watch R007&lt;/div&gt;         
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>