Boostrap 4 - Card deck and different sizes

Question

I want to display card with same height but with different sizes, respecting Boostrap's grid.

If I take the example of card-deck : https://jsfiddle.net/sb7t5y3x/, I just want for example the first card to be col-6 sized, for me the most elegant way should be :

<div class="card col-6"> .... </div>

But it doesn't work since .card-deck > .card applies a flex 1.

So I tried to wrap my cards in col :

<div class="col-6">
    <div class="card"> ... </div>
</div>

But col have paddings, and card have margin, so I have 2 margins applied (see https://jsfiddle.net/applyss/vcgkujxp/, spaces are not regular)

Is there a simple standard way to keep cards with same height in a grid system ?

Your first solution seems to achieve what you need, no? https://jsfiddle.net/kcpzef53/ — fraggley, May 09 '20 at 08:30
@fraggley no, if you put for example col-10, it doesn't respect the Bootstrap grid. It makes it a little bigger but not as grid system — Vincent Decaux, May 09 '20 at 08:31
as I said entering the fiddle that you linked, changing one of the div 'card' with what I wrote was all right — Simone Rossaini, May 09 '20 at 08:38
@SimoneRossaini Can you provide a correct fiddle please ? it doesn't work for me — Vincent Decaux, May 09 '20 at 08:39

score 1 · Accepted Answer · answered May 09 '20 at 12:05

This is basically a duplicate of bootstrap 4 card-deck containing cards with different width

You should use the grid instead of the card-deck.

"But col have paddings, and card have margin, so I have 2 margins applied, .. spaces are not regular"

The is happening because you didn't consistently wrap all 3 cards in columns. You can use the spacing utility classes to adjust margins or padding if needed.

<div class="container pt-3">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
        <div class="col-md">
            <div class="card h-100">
                <div class="card-body">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

Demo: https://codeply.com/p/hFvvJ63Tef

Seems my bad, I didn't find this answer before, thanks – Vincent Decaux May 09 '20 at 12:15 — Vincent Decaux, May 09 '20 at 12:15

score 0 · Answer 2 · answered May 09 '20 at 08:44

This is a simple example, obviously is weird to see but all div have same height as you want.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="container pt-3">
<div class="card-deck">
  <div class="col-md-8  d-flex align-items-stretch">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card col-6">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
</div>

As I wrote in my question, this applies 2 margins on the first card (padding of the col + margin of the card), the result is not correct — Vincent Decaux, May 09 '20 at 08:45
you can copy the content of the class, leaving out what you don't want — Simone Rossaini, May 09 '20 at 08:47

score -1 · Answer 3 · answered May 09 '20 at 08:59

-1

did you want to your code be like this? its a simple way to have same height

https://jsfiddle.net/g428dbLs/
height:100%;

answered May 09 '20 at 08:59

saba

76
1
4

and you can better that with flex box – saba May 09 '20 at 09:02

Boostrap 4 - Card deck and different sizes

3 Answers3

Related