CODEWITHSUNDEEP
cssflexboxbootstrap-4
Damon
Damon

Reputation: 10818

How to to combine card-deck with set width cards?

I am using flex-mode and I would like a 'deck' of 'cards' that all have the same height and width, and the width to be consistent and based on different breakpoints. I have not found a way to do this, though. Whenever I add a card-deck class around a group of cards, they ignore any width set, whether with col-* classes or by setting a specific width on them.

This is the hierarchy I was trying to make work: .row>.card-deck-wrapper>.card-deck>(.col-md-3>.card>.card-block)*4

And here is a codepen with what I was attempting to make work

Upvotes: 1

Views: 1881

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49054

The card-group and card-desk both use display: table (or display:flex when $enable-flex is set to true), so you should not wrap your cell into col-* classes to set their width. The col-* classes not only set the width but also float: left, see also: https://stackoverflow.com/a/35804749/1596547

For display: table the widths are is the result of the automatic table layout algorithm as implemented by the browser, see https://stackoverflow.com/a/21130851/1596547.

For display:flex you can set the flex-basis to a fixed width (with both flex-grow and flex-shrink set to 0) see https://stackoverflow.com/a/23794791/1596547

Upvotes: 2

Related Questions