Responsive Card Decks

[DaSchTour]

Although this may be a feature that could only be made using flexbox, but it would be nice to have responsive card decks. At the moment all cards inside a deck are squeezed into one row. It would be great if there was a possibility to add a class to the card-deck that defines the width of each card for each breakpoint. Something like card-deck cards-sm-6 cards-md-4 cards-lg-3.
On mobile devices all cards will be stacked. On sm there are two cards each row, md has 3 cards and lg has 4 cards per row.

And that's not the same as putting cards into normal grid columns as they will not have the same hight when they are not in a deck.

[RyanZim]

@DaSchTour Just wanted to clarify that decks auto-collapse at xs. See it live: https://jsfiddle.net/m701buty/.

I could see the value of adding full grid functionality though. I'm not sure if adding .cards-*-* is a good idea (a lot of bloat).

Foundation uses JS to achieve something similar: http://foundation.zurb.com/sites/docs/equalizer.html

[twbs-lmvtfy]

Hi @RyanZim!

You appear to have posted a live example (https://fiddle.jshell.net/m701buty/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 69, column 7 thru column 68: Element img is missing required attribute src.
• line 77, column 7 thru column 68: Element img is missing required attribute src.
• line 85, column 7 thru column 68: Element img is missing required attribute src.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[DaSchTour]

Why use ugly JS that makes the elements jump when flexbox adds this natively? Auto Collapse on XS is the minimum I expected from card decks.
I know Foundation very well. My idea was more to adapt how cards work in Semantic UI to bootstrap.
From my point of view it's a lot of bloat to manage the float through JavaScript or by creating rows or adding the same column width to every card.

[RyanZim]

I was just suggesting this as a possible option. It will be several years until I start using flexbox due to the current lack of browser support.

[DaSchTour]

Lack of browser support? It's just IE that was deprecated by Microsoft and old buggy android stock browser nobody want's to use. 95% of all users at the moment use a browser that supports flexbox.
You'll miss a lot!
But I must say. That my concept of cards is matching better into foundation framework. So I'll shift my project to use foundation. It's easier to implement them there and maybe even get them into the framework.

[markoheijnen]

Any change this ticket could get reopened?

[RyanZim]

@markoheijnen Probably would be best to open a new ticket.

[cvrebert]

Successor: #20321