How to make Bootstrap cards the same height in card-columns?

Question

I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. How can I make all cards to be the same height?

All I can think by now is setting the following CSS rule:

.card {
    min-height: 200px;
}

But that is just a hard coded solution that won't work in a general case. The code in my view is the same as the one in the docs i.e:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <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>
    </div>
  </div>
  <div class="card card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" data-src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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 card-block card-inverse card-primary text-xs-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block text-xs-center">
    <h4 class="card-title">Card title</h4>
    <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 class="card">
    <img class="card-img" data-src="..." alt="Card image">
  </div>
  <div class="card card-block text-xs-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card card-block">
    <h4 class="card-title">Card title</h4>
    <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>

That example is for Masonry-like columns. The whole point of that style is that the cards are of *different* heights. Use a [deck](http://v4-alpha.getbootstrap.com/components/card/#decks) and enable flexbox mode if you want equal heights. — Quentin, Mar 08 '16 at 13:47
The deck works only for cards in a row. What I want is the same effect of `card-columns` but keeping same height. — blueSurfer, Mar 08 '16 at 13:52

Kerry7777 · Answer 1 · 2021-12-23T04:18:10.867

317

You can either put the classes on the "row" or the "column"? Won't be visible on the cards (border) if you use it on the row. https://getbootstrap.com/docs/4.6/utilities/flex/#align-items

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

UPDATE BS5 FULL HTML EXAMPLE

https://codepen.io/Kerrys7777/pen/QWgwEeG

edited Dec 23 '21 at 04:18

answered Apr 04 '17 at 06:04

Kerry7777

4,246
1
18
28

11

h-100 is not a fixed height, it's height at 100% (of the row) – konyak Oct 18 '19 at 18:57
@konyak yeah, I realise that buddy. I am not referring to h-100 (scroll down this page). – Kerry7777 May 05 '20 at 05:32
1

@Kerry7777 thanks for the much needed clarification, BUDDY! Also, for my case it was critical to add the d-flex align-items-stretch to the divs keeping my cards, but I also needed to add `h-100` to both the card and the card footers to ensure they all match – Kyle Burkett Aug 11 '20 at 17:30
The technically correct solution is to use a Bootstrap card decks. However this solution works 100%. – Leander Dec 01 '21 at 10:17

score 235 · Answer 2 · answered Oct 29 '17 at 05:59

235

I'm using Bootstrap 4 (Beta 2). Meanwhile the situations seems to have changed. I had the same problem and found an easy solution. This is my code:

<div class="container-fluid content-row">
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <div class="card h-100">
                … content card …
            </div>
        </div>
        … all the other cards … 
    </div>
</div>

With "col-sm-12 col-lg-6" I've made the cards responsive. With "card h-100" I've set all cards to the height of their parent column. On my system this works, but I'm not a pro. So, hopefully I helped someone.

answered Oct 29 '17 at 05:59

user3350279

2,589
2
13
8

36

so simple h-100 – PNC Nov 08 '17 at 19:38
16

.h-100 - brilliant – JCraine Feb 18 '18 at 00:46
2

This did the trick for me when `d-flex` caused issues with IE (which I have to support). I just added a `mb-4` to the parent div to separate the cards a little more. – Charles Paske May 31 '18 at 22:53
and you can also use .pre-scrollable to make it scroll vertically – Muhammad Waqas Aziz Jul 16 '18 at 12:25
I'd add .py-2 class to all divs with the .col-* class to add padding between the rows. – konyak Oct 18 '19 at 18:55
@konyak that padding was what i needed (h-100 is not compatible with mb-..) – cdsaenz Jan 05 '20 at 22:35
@konyak or simply add `mb-1` to the column like `class="col-sm-6 my-col mb-1">` – DarkLite1 Apr 05 '20 at 10:20
Yes I can confirm this works! so simple – Lionel Yeo Oct 21 '21 at 00:59
Thanks @user3350279 and @Muhammad Waqas Aziz both worked. But can we restrict `pre-scrollable` to particular height or we need to make a custom css for particular height? – khizer Nov 11 '21 at 09:58
Didn't work. Tried to add it several places, no luck. – Dgloria Aug 18 '22 at 09:51

score 143 · Answer 3 · edited Oct 12 '20 at 12:25

Bootstrap 4 has all you need : USE THE .d-flex and .flex-fill class. Don't use the card-decks as they are not responsive. I used col-sm, you can use the .col class you want, or use col-lg-x the x means number of width column e.g 4 or 3 for best view if the post have many then 3 or 4 per column

Try to reduce the browser window to XS to see it in action :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

This answer works great! If you can't use 'card-column' or 'card-deck' to get the desired responsive behaviour in all viewports. — Getsomepeaches, Jun 27 '18 at 02:20
This worked for me. I have a column with one big card, and at right have another column with two rows. so, the left card takes the height of the two adjacent rows, thanks! — Erich García, Feb 19 '19 at 15:08
This was the way to go. I tried `card-columns` but it could not take more than 3 columns per row. Thanks for this answer — Yeku Wilfred Chetat, Jun 28 '20 at 15:19
card-deck wasn't working in my case, your answer did the job ! — TBG, Jul 22 '20 at 16:18
Great answer, and if anyone is using BS 5, check the [migration page](https://getbootstrap.com/docs/5.0/migration/) as much has changed (including how cards are layed out) -- goodbye beloved `jumbotron`... — nicorellius, Jan 30 '21 at 00:38
2021 - Worked on AdminLTE3 with BS4 - This should be the first thing you try! If using `card-outline`, put the `flex-fill` on it, and `d-flex` on your column. +1 — Wade, Apr 03 '21 at 20:41

score 38 · Answer 4 · answered Feb 28 '19 at 00:02

38

You can apply the class h-100, which stands for height 100%.

answered Feb 28 '19 at 00:02

bsesic

589
5
7

score 19 · Answer 5 · answered Mar 12 '17 at 10:04

Here is how I did it:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

Carol Skelly · Answer 6 · 2021-04-29T11:55:09.293

18

UPDATE: In Bootstrap 4, flexbox is now default, and each card-deck row will contain 3 cards. The cards will fill to full height.

http://codeply.com/go/x91w5Cl6ip

The Bootstrap 4 alpha card-columns uses CSS3 columns which don't really support equal heights (except column-fill which is only suppored in Firefox).

If you instead enable Bootstrap 4 flexbox mode, you could instead use the card-deck and a little CSS to equalize the height and wrap every 3 columns.

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Related
Bootstrap 4 Cards of same height in columns

edited Apr 29 '21 at 11:55

answered Mar 10 '16 at 14:44

Carol Skelly

351,302
90
710
624

I've forked your codeply to test out something; I need the titles to stretch out to be same height as well, which doesn't happen here: https://www.codeply.com/go/fqnQZ2ZGJy -- know of any way I can get my "Shorter title"s to take the same height of the longer title? I've tried playing with flexbox and grids but can't seem to get it just right. – davewoodhall May 22 '18 at 12:47

score 9 · Answer 7 · answered Apr 07 '20 at 16:25

You can use card-deck, it will align all the cards... this come from bootstrap 4 official page.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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>

Not working for me. What works is class="card h-100" https://www.codeply.com/go/jbcgzs2Nzq — hubert17, Apr 12 '21 at 16:51

score 5 · Answer 8 · answered Oct 19 '16 at 11:40

5

I took a slightly different approach. Using the Card Deck wrapper

I added a style rule that limits the height of the card block:

.card .card-block {max-height:300px;overflow:auto;}

This give the following result:

answered Oct 19 '16 at 11:40

skrile

388
4
10

Use on card body like: `
`
– Leandro Bardelli Jul 20 '22 at 18:06

score 4 · Answer 9 · answered Dec 30 '17 at 13:51

4

wrap the cards inside

<div class="card-group"></div>

or

<div class="card-deck"></div>

answered Dec 30 '17 at 13:51

MK4

725
8
24

score 3 · Answer 10 · answered Apr 27 '20 at 11:24

Another useful approach is Card Grids:

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

score 3 · Answer 11 · edited Dec 21 '20 at 12:01

3

this may help you

just follow this code

<div class="row">
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
   <div class="col-md-4 h-100">contents....</div>
</div>

use bootstrap class "h-100"

edited Dec 21 '20 at 12:01

Mario Petrovic

7,500
14
42
62

answered Dec 21 '20 at 11:37

praveen kumar

102
4

Sébastien Gicquel · Answer 12 · 2021-11-18T10:18:15.527

You can add d-flex and flex-column to the div with card-body.

Here is a working example :

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
          <p class="text-muted">Lorem ipsum dolor </p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">consectetur adipiscing elit</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Smaller title here that wraps 1 line</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <p class="text-uppercase">adipiscing </p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-4 d-flex align-self-stretch">
      <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title text-uppercase">Longer title here that wraps 3 lines, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="mt-auto border border-danger">
            <p class="text-uppercase mb-0">Hello World!</p>
            <a href="#" class="btn btn-info btn-block">CTA</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

score 2 · Answer 13 · answered Mar 02 '20 at 21:52

I am a novice at this so please forgive if I am missing something all together.

I tried many of the above. If you set the height = 100% the card will always expand to the greatest length of the longest card. The container will constrain all to the same length.

I wanted to see the container, so I used background color to help me see what was going on.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

score 2 · Answer 14 · answered Mar 31 '21 at 14:16

2

For Bootstrap 5 and 4

HEIGHT-put your all card in div with class="card-deck"

WIDTH -give your all card style {min-width: 50ch}

answered Mar 31 '21 at 14:16

SidG

19
2

1

This question is very old and has many answers, please explain why is your approach different and new? – FrankM Mar 31 '21 at 15:01
It work perfectly for me and it is pretty easy. And it is also responsive becoz of min-width(in place of width) – SidG Mar 31 '21 at 18:56
According to the 5.2 doc, `card-deck` class no longer exist : "Dropped .card-deck in favor of our grid. Wrap your cards in column classes and add a parent .row-cols-* container to recreate card decks (but with more control over responsive alignment)." source : https://getbootstrap.com/docs/5.2/migration/#card – Sébastien Gicquel Apr 12 '23 at 12:00

score 2 · Answer 15 · answered Nov 12 '21 at 14:13

2

<div class='row'>
  <div class="col-xs-12 d-flex align-items-stretch"></div>
</div>

answered Nov 12 '21 at 14:13

asad minhas

147
2
10

doncadavona · Answer 16 · 2018-10-01T01:42:00.613

1

Most minimal way to achieve this (that I know of):

Apply .text-monospace to all texts in in the card.
Limit all texts in the cards to same number of characters.

UPDATE

Add .text-truncate in the card's title and or other texts. This forces texts to a single line. Making the cards have same height.

edited Oct 01 '18 at 01:42

answered Aug 13 '18 at 08:16

doncadavona

7,162
9
41
54

I think you are way off with this answer. Each card or section of a working web page will clearly have different amounts of text (characters) and use fonts/typefaces that are not monospace. Why would you want to truncate the text content that visitors (can't) read? – Kerry7777 Jan 19 '19 at 04:33
@Kerry7777, you may want to truncate a long string and add a "..." at the end of it to let the users know it has been truncated. For them to read the entire string, they will have to click or hover it. That way, we can make consistencies on the contents displayed. Because contents are not the same. Some are short, some are long, and our screen space are limited. – doncadavona Jan 21 '19 at 16:49
1

In some cases, it is only the length of text which makes the cards unequal in height. So this answer is useful. – Mohammed Shareef C Oct 05 '19 at 01:49

score 1 · Answer 17 · edited May 05 '23 at 12:45

If any card item height is e.g. 400px (based on its contents), because the default for flex-align is stretch, then .card-item (child of row or card-collection class) will be stretched. Making the height of the card to be 100% of the parent will occupy this full height.

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

This may work, but Bootstrap provides classes for most of the custom styles you've written. It's best to use what the library offers for future maintenance. — isherwood, May 05 '23 at 12:46

score 1 · Answer 18 · edited Apr 09 '21 at 12:53

According to the question I have an answer it may help you and you can use it. You can just use height attribute and set it as height: 100vh; I have used 70vh and cards will be fixed height which you have given.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- Bootstrap 4.5 CSS-->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

      <!-- Bootstrap JS Requirements -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
          crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
          integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
          crossorigin="anonymous"></script>
      <link rel="stylesheet" href="index.css">
      <title>Document</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style>
      /*Use height property to set equil card height*/
      .card {
          background-color: #56568a;
          margin: 10px !important;
          height: 70vh;
          width: auto;
      }
  </style>
  <body>
      <div class="container">
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img5.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> Product Launch</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text "><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">Today</small>
                      </p>
                  </div>
              </div>
          </div>
          <div class="col-sm-6 col-md-6 col-lg-3">
              <div class="card">
                  <img class="card-img-top img-fluid" src="img6.PNG" alt="Card image cap">
                  <div class="card-block">
                      <small class="purple"> ddc</small>
                      <h4 class="card-title">Leveraging Social Proof for Growth</h4>
                      <p class="card-text">Duolingo removes language barriers by connecting people that need
                          websites translated with students
                          that learning a
                          language...</p>
                      <p class="card-text"><i class="far fa-user"></i><small class="purple">Praveen</small>
                          <i class="far fa-clock    "></i><small class="purple">2 days ago</small>
                      </p>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>

According to the question I have an answer it may help you and you can use it. You can just use height property and height: 100vh; I have used 70vh and cards will be fixed height which you have given. — PraWin Pravs, Apr 09 '21 at 10:27

score 0 · Answer 19 · answered Jan 10 '23 at 14:56

0

You can set $card-height: 100% in Sass, which was~ null by default

answered Jan 10 '23 at 14:56

Yuh Lee

343
1
4

Wande Shokunbi · Answer 20 · 2023-05-02T15:16:35.800

This is quite simple. You just need to put the h-100 class on the card.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">In exercitation voluptate consectetur velit eiusmod sint minim duis cillum minim nisi aliqua. Id dolore enim laboris exercitation qui magna reprehenderit. Ad irure pariatur enim officia dolor irure adipisicing magna. Anim ullamco qui quis ullamco sint aliquip id culpa non nulla cupidatat consequat ex sit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Sint tempor velit anim eiusmod. Laborum minim aliquip eu adipisicing cillum cupidatat elit excepteur.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card h-100">
                    <img class="card-img-top" src="https://1.bp.blogspot.com/-G5J7kLSz8YY/XtY-bTC3X5I/AAAAAAAAAh4/jLokDsDeiFQsbAtymxMCaElw9Qlx8OkfgCNcBGAsYHQ/s1600/bootstrap-illustration.png" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Dolore labore esse mollit in nostrud adipisicing velit in amet exercitation incididunt minim. Voluptate elit consectetur culpa fugiat elit enim incididunt magna officia esse. Nulla est duis in enim id consequat cupidatat dolor eu elit velit.</p>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>

See Codepen example

score -3 · Answer 21 · answered Jun 24 '20 at 14:26

-3

this worked fine for me:

<div class="card card-body " style="height:80% !important">

forcing our CSS over the bootstraps general CSS.

answered Jun 24 '20 at 14:26

Zenish Prajapati

11
4

Very bad approach, you should avoid this at all costs! – lewis4u Aug 24 '20 at 08:09
Fixed heights are bad and inline styles are bad, especially with a style library. – isherwood May 05 '23 at 12:45

score -4 · Answer 22 · answered Mar 20 '17 at 20:42

If anyone is interested, there is a jquery plugin called: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

matchHeight makes the height of all selected elements exactly equal. It handles many edge cases that cause similar plugins to fail.

For a row of cards, I use:

<div class="row match-height">

Then enable site-wide:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

score -17 · Answer 23 · answered Mar 08 '16 at 14:07

-17

jsfiddle

Just add the height you want with CSS, example:

.card{
    height: 350px;
}

You will have to add your own CSS.

If you check the documentation, this is for Masonry style - the point of that is they are not all the same height.

answered Mar 08 '16 at 14:07

PlatinumJay

95
7

Seems that the content in the cards is not properly aligned. This solution is too manual I wonder if there's something more "smart" – blueSurfer Mar 08 '16 at 14:20
You could try something with jQuery, to dynamically create the height. Depends what you want to do with them. – PlatinumJay Mar 08 '16 at 14:23
Just very curious to know why there so many down vote for the answer? cuz it seems it works – Kick Buttowski Jul 09 '18 at 21:56
3

Doesn't this mean the card remains a fixed height, not a responsive equal height? – Robert Andrews Oct 18 '18 at 09:28

How to make Bootstrap cards the same height in card-columns?

23 Answers23

UPDATE

Linked

Related