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

Bootstrap 4 card deck responsive

I tried to use the , and to make it responsive, but you lose the

All the cards have the same height

feature of the card deck, if you do that. What you need is CSS:

.card-deck {
  margin: 0 -15px;
  justify-content: space-between;
}

.card-deck .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
  }
}

Here is my CodePen: Bootstrap 4 card deck responsive