0

In Bootstrap 4, can I define a card deck with just two cards (or less) in a row?

Example:

1st + 2nd

3rd + 4th

5th + 6th

7th

All cards within in a row should have the same height. But every row is allowed to have a different/individual height.

I checked those two related questions, but none of them really solved my needs:

d219
  • 2,707
  • 5
  • 31
  • 36
Ingmar
  • 1,525
  • 6
  • 34
  • 51
  • 2
    As explained in the other answers and [in this answer](https://stackoverflow.com/questions/38895106/how-to-limit-number-of-columns-of-card-deck/38955328#38955328), you're better off not using card-deck and using the grid columns. – Carol Skelly Jul 31 '18 at 15:40
  • 1
    Ohhhh. *Your* link is super. Exactly what I have been looking for. Works like a charm. No idea why I didn't find this post myself. Thanks ZimSystem! – Ingmar Jul 31 '18 at 18:08

1 Answers1

3

So, this works for me:

 <div class="row">
      <div class="col-6 h-100 mb-3">
            <div class="card">
              ...
            </div>
      </div>
      <div class="col-6 h-100 mb-3">
            <div class="card">
              ...
            </div>
      </div>
      ... {repeat} ...

Two cards per row. All cards (within a given row) having the same height. Very nice.

Ingmar
  • 1,525
  • 6
  • 34
  • 51