Bootstrap 4 card deck table-cell columns responsive based on viewport?

Question

So in Bootstrap v4, I see there\'s a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal

Answer 1

Update 2019

It's hard to set the cards widths (responsive) with card-deck because it uses display:table-cell and width:1%.

I found it easier to make them responsive using the cards inside the Bootstap grid col-* and then you can use the grid viewport breakpoints. Enable Bootstrap's flexbox if you want the cards to be equal height like the card-deck.

http://www.codeply.com/go/6eqGPn3Qud

Also, img-responsive has changed to img-fluid

Bootstrap 4.0.0

Flexbox is now the default, but there is still not a supported way to make responsive card-deck's. The recommended way is to use cards inside the grid:

Responsive cards using grid

Another way to make a responsive card-deck, is using responsive reset divs every x columns. This will force cards to wrap at specific breakpoints.

For example: 5 on xl, 4 on lg, 3 on md, 2 on sm, etc..

Responsive card deck demo (4.0.0)
Responsive card deck demo (alpha 6)
CSS pseudo elements variation