Achieve equal dynamic width and height of bootstrap cards while controlling number of columns

Question

I'm trying to specify the number of columns for a bootstrap card deck because I want equal width and height for each card.

The height MUST be dynamic based on the content of card body just like a card deck provides and provide equal spacing between all cards.

I can specify the number of columns using ROW and COL-* with a card class, but then the height and spacing between all the cards is random based on the card body. The CARD-DECK class gives me the equal height and width for each card but I cannot seem to control the number of columns which in this case I would like to be two columns.

I asked this question previously and it was automatically closed by referencing the following questions but I have not seen any of them successfully address having the same height on each card when there are several rows of cards.

Bootstrap 4 card-deck with number of columns based on viewport

bootstrap 4 card-deck containing cards with different width

How to limit number of columns of card-deck?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card mb-3 bg-primary">
                <div class="card-body">
                    <h4 class="card-title">Card 4</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="card-deck">
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 1</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 2</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 3</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p>
                </div>
            </div>
            <div class="card mb-3 bg-success">
                <div class="card-body">
                    <h4 class="card-title">Card 4</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

                    </p>
                </div>
            </div>
    </div>
</div>

Actually it does not do what I need. Your code has different heights for each row. They looked the same at first glance, but they don't behave like a card-deck where every card has the same height in every row. — Geekn, Mar 08 '19 at 21:50
card decks also use flexbox where each card is height of the tallest in that row, and card decks only have 1 row, until they stack vertically when they become different height. "Your code has different heights for each row." -- yeah that's how flexbox works and seperate card-decks would be no different... height is controlled by the tallest content. the only thing you can do is set min height. — Carol Skelly, Mar 08 '19 at 22:25
But that's the whole point of the question. A single card deck controls the height of every card, but doesn't allow you to control the number of columns. To control number of columns, I used a single ROW and many COL but then I lose the behavior of card deck for every row. Hence the question that you keep saying is answered but I have still yet to find one. : ( — Geekn, Mar 08 '19 at 22:28
Correct but every card within each "visible" row of a card deck has the same height. That's all I want. How do I get card deck behavior but limit the max number of columns it uses? — Geekn, Mar 08 '19 at 22:30
As explained in the docs, card-decks are not responsive: *["For the time being, these layout options are not yet responsive."](https://getbootstrap.com/docs/4.3/components/card/#card-layout)* therefore there's no way to control width. — Carol Skelly, Mar 08 '19 at 22:32
I get that. I've seen you mention that several times. Is there another way to achieve the desired behavior? I only mention the card deck because it behaves exactly as needed with the exception of not allowing me to control number of columns. So is there some other way to achieve that? — Geekn, Mar 08 '19 at 22:33
It's already done here: https://www.codeply.com/go/MxOXbZgbX8 different rows, same height in each. — Carol Skelly, Mar 08 '19 at 22:34
Cards 3 and 4 have different height than cards 1 and 2. How does that mimic a card deck? — Geekn, Mar 08 '19 at 22:36
Again card-decks don't wrap into rows, and there's no way to do that. Since the card-deck has only one row it's simply making it the height of the tallest card. There's no way to change this behavior unless you set a min-height that will work for all of your content. Also your question is unclear. Why are you saying card decks give equal width and height? That's not true. card deck cards are not square. — Carol Skelly, Mar 08 '19 at 22:36
I see what you're saying and I appreciate you helping. Hopefully I can find another way to achieve what is needed here. Probably javascript to get the max height of the longer card and then dynamically set the height of other cards to match. — Geekn, Mar 08 '19 at 22:44

IvanS95 · Answer 1 · 2019-03-08T22:18:44.663

Bootstrap provides classes to make content span 25%, 50%, 75% or 100% of the width or height of the container for an element, you can add the class h-100 to the cards so they use the full available height, which will be increased if the column with more content gets bigger.

Docs here: https://getbootstrap.com/docs/4.3/utilities/sizing/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 1</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
            ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 2</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 3</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
            ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
          </p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="card h-100 mb-3 bg-primary">
        <div class="card-body">
          <h4 class="card-title">Card 4</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Not really...each row has a different height. A card deck provides the same height on every row for every card. — Geekn, Mar 08 '19 at 21:59
Upon inspecting them with Chrome Dev Tools each row has the same height; can you show where you see the difference? — IvanS95, Mar 08 '19 at 22:09
Sure...I could be doing something wrong but I added your code snippet to my post and just removed some text from card 3 to how the second row is shorter than the first one. — Geekn, Mar 08 '19 at 22:14
Ohhhhh yeah, I know what you mean.. sure that's because the cards on one row have less content so the height is reduced; I'll see what can be done about that — IvanS95, Mar 08 '19 at 22:15
Exactly...the card deck takes care of that, but I'm can't figure out how to mimic that but also control the columns. I'm gonna remove that extra snippet so as not to confuse anyone. Not sure why @Zim keep closing my question - LOL. Can you see where his referenced answers resolve the height issue? — Geekn, Mar 08 '19 at 22:17

Achieve equal dynamic width and height of bootstrap cards while controlling number of columns

1 Answers1