1

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

danopz
  • 3,310
  • 5
  • 31
  • 42
Damon
  • 10,493
  • 16
  • 86
  • 144

1 Answers1

2

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

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224