title: Reduce bootstrap 4 card-column spacing
body: <p>I have a bootstrap column with 8 cards in it, to almost create that "masonry" effect from getbootstrap (<a href="https://getbootstrap.com/docs/4.1/components/card/#card-columns" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.1/components/card/#card-columns</a>) - I only used one online image for the JSFiddle example though, and I removed the card headers etc... My problem is: I want to reduce the spacing (gaps) between the thumbnails, to about 2pixels, but it doesnt seem to be working at all. I tried putting the "classic_thumbnails" style in all the divs, I tried adding p-1 and m-1, nothing seems to working, and as expresssed in the "classic_gallery" style, the corners (border radius) is still rounded, which I would like to be sharp...</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div class="container"&gt; 
  
  &lt;div class="card-columns"&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
       image"&gt;
    &lt;/div&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
     &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
    &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
   image"&gt;
    &lt;/div&gt;
     &lt;div class="card classic_thumbnails"&gt;
      &lt;img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
  image"&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here is the CSS (the html file does include a link to the Bootstrap CDN as well:</p>
  
  <pre><code>.classic_thumbnails {
  border-radius: 0px;
  margin: 1px;
  padding: 1px;
  border: 1px;
  border-color: #000000;
  
  }
  </code></pre>
  
  <p>Any help would be so appreciated, here is the fiddle: <a href="https://jsfiddle.net/JodyTerblanche/4v96p8k1/13/#&amp;togetherjs=PoFRaqJ9xr" rel="nofollow noreferrer">https://jsfiddle.net/JodyTerblanche/4v96p8k1/13/#&amp;togetherjs=PoFRaqJ9xr</a></p>