Implement bootstrap gapless card-columns

Question

the current bootstrap implementation of card-columns has gaps. any idea what the css would be to achieve no gaps?

i have tried something like

.card {
  padding: 0px;
  margin: 0px;
}

but this doesn't affect anything.

any idea would be appreciated. thanks!

Answer 1

There is no problem with the card class. You are looking for it wrapper, which has the property column-gap: 1.25rem; . If you set the style .card-columns { column-gap: 0; } .card-columns { column-gap: 0; } , you would remove the space between the columns.

Add .card-columns .card { margin-bottom: 0; } .card-columns .card { margin-bottom: 0; } to completely remove the spaces.