CODEWITHSUNDEEP
bootstrap-4
Jody Terblacnhe
Jody Terblacnhe

Reputation: 33

Reduce bootstrap 4 card-column spacing

I have a bootstrap column with 8 cards in it, to almost create that "masonry" effect from getbootstrap (https://getbootstrap.com/docs/4.1/components/card/#card-columns) - 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...

The HTML

<div class="container"> 

<div class="card-columns">
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
     image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
   <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
  <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
 image">
  </div>
   <div class="card classic_thumbnails">
    <img class="card-img" src="https://i.imgur.com/8v9vYpl.png" alt="Card 
image">
  </div>
</div>  

</div>

Here is the CSS (the html file does include a link to the Bootstrap CDN as well:

.classic_thumbnails {
border-radius: 0px;
margin: 1px;
padding: 1px;
border: 1px;
border-color: #000000;

}

Any help would be so appreciated, here is the fiddle: https://jsfiddle.net/JodyTerblanche/4v96p8k1/13/#&togetherjs=PoFRaqJ9xr

Upvotes: 3

Views: 4621

Answers (1)

brooksrelyt
brooksrelyt

Reputation: 4035

To edit the spacing, you must overwrite the CSS for the class .card-columns. Below I reduced the spacing from column-gap: 1.25rem; to column-gap: 1.25rem;

.card-columns {
    column-gap: 0.25rem;
}

To remove the border radius for sharp corners you need to overwrite .card-img to remove the border-radius.

Like this:

.card-img {
    border-radius: 0;
}

Your class .classic_thumbnails is instead adding your CSS to the outer div's wrapping the images.

Your Fiddle: https://jsfiddle.net/8q20m1et/

Upvotes: 2

Related Questions