Margin between cards

Hi there,

Im working on my website and everything works as I expected. I only have one issue and that’s to aligning my cards properly. What I tried to achieve is three cards (with a 200px max-width) positioned in one horizontal row with even margins in between (flexbox: space-evenly). As it are three cards the most left/right card shouldn’t have a left/right margin, otherwise they won’t align with the container above it. I tried everything (I think), but I couldn’t figure it out, I added a photo for reference. Thanks in advance.

Hi @Assist, Welcome to the community.

I have attached a file with a demo of how you could do this…

NOTE: The ‘p-0’ class on the column that has the cards. This is a bootstrap class that applies zero padding.

I have used the Bootstrap Card Decks… docs are here, just scroll down or search for “Card Decks” "https://getbootstrap.com/docs/4.0/components/card/

ExampleCards.bloc (726.8 KB)

1 Like