0

I'm working with bootstrap cards. The amount of cards within a card-deck is dynamic. Now my issue is that each card should be col-md-4 (33%) in width. When the amount of cards is > 1 everything is fine, but as soon as I only have a single card this card is not 33% based on col-md-4.

Here a jsfiddle: https://jsfiddle.net/2o09b4te/ remove cards 1 by 1 until you have 1 left.

Any idea what I'm doing wrong?

3 cards: result correct 3 cards: result correct

2 cards: result correct 2 cards: result correct

1 card: result wrong 1 card: result wrong

Yaerox
  • 608
  • 2
  • 11
  • 27
  • 2
    `
    ` the problemi is with this div
     – Sfili_81 Sep 11 '20 at 09:09
  • Columns should always be direct descendant of `.row`. Why are you using the `.card-deck`? https://stackoverflow.com/questions/36430816/bootstrap-4-card-deck-with-number-of-columns-based-on-viewport/36431664#36431664 – Carol Skelly Sep 11 '20 at 10:26
  • @Zim Why is a good question. When I saw those cards I thought they look great and fit perfectly for my use case. In the example they built a card-deck out of cards. So I did this as well. Can't give you anything more then that why I used this. Removing card-deck seems to solve my issue. – Yaerox Sep 11 '20 at 11:32
  • Basically "Need a set of equal width and height cards that aren’t attached to one another? Use card decks." is exactly what I wanted at least optic wise. By removing card-deck I have the same looks based on col-md's padding. So I think I should be fine with it now. – Yaerox Sep 11 '20 at 11:33

2 Answers2

1

.row must contain direcly .col-....

Here is a correction : https://jsfiddle.net/8mhbz9gj/1/

Obzi
  • 2,384
  • 1
  • 9
  • 22
  • From what I see you removed `
    ` then it works for me as well.
     – Yaerox Sep 11 '20 at 10:50
  • Yes, I also added a `
    ` to have a nicer demo. I also moved `.text-center` and change `.my-3` to `.py-3` on the `.row`.
     – Obzi Sep 11 '20 at 11:37
  • AFter a break on the weekend I reread your answer and finally got what you said. I was confused because what you did in your jsfiddle didn't matched your answer in my world. Anyway, thank you sir ;) – Yaerox Sep 14 '20 at 06:07
0

Make sure <div> tag which follows <div> tag with class row, contain class name col-md-4.

on your first card, swap

 <div class="card-deck my-3 text-center">
  <div class="col-md-4">

Like this

<div class="col-md-4">
<div class="card-deck my-3 text-center">
Kat101
  • 1
  • 1