How to make Bootstrap 4 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>

Solution 1

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

Solution 2

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.

Solution 3

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>

Solution 4

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

Solution 5

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>

View more solutions

Comments

[baao]

Any efforts so far? Any code to share?

[Quentin]

That example is for Masonry-like columns. The whole point of that style is that the cards are of different heights. Use a deck and enable flexbox mode if you want equal heights.

[blueSurfer]

The deck works only for cards in a row. What I want is the same effect of card-columns but keeping same height.

[blueSurfer]

Seems that the content in the cards is not properly aligned. This solution is too manual I wonder if there's something more "smart"

[PlatinumJay]

You could try something with jQuery, to dynamically create the height. Depends what you want to do with them.

[PNC]

so simple h-100

[JCraine]

.h-100 - brilliant

[davewoodhall]

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: 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.

[Charles Paske]

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.

[Getsomepeaches]

This answer works great! If you can't use 'card-column' or 'card-deck' to get the desired responsive behaviour in all viewports.

[Kick Buttowski]

Just very curious to know why there so many down vote for the answer? cuz it seems it works

[Muhammad Waqas Aziz]

and you can also use .pre-scrollable to make it scroll vertically

[Robert Andrews]

Doesn't this mean the card remains a fixed height, not a responsive equal height?

[Kerry7777]

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?

[doncadavona]

@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.

[Erich García]

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!

[Mohammed Shareef C]

In some cases, it is only the length of text which makes the cards unequal in height. So this answer is useful.

[konyak]

I'd add .py-2 class to all divs with the .col-* class to add padding between the rows.

[konyak]

h-100 is not a fixed height, it's height at 100% (of the row)

[cdsaenz]

@konyak that padding was what i needed (h-100 is not compatible with mb-..)

[meeps]

this should be the ACed answer

[DarkLite1]

@konyak or simply add mb-1 to the column like class="col-sm-6 my-col mb-1">

[Andrew Bullock]

This is the real answer

[Kerry7777]

@konyak yeah, I realise that buddy. I am not referring to h-100 (scroll down this page).

[Yeku Wilfred Chetat]

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

[TBG]

card-deck wasn't working in my case, your answer did the job !

[Kyle Burkett]

@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

[lewis4u]

Very bad approach, you should avoid this at all costs!

[nicorellius]

Great answer, and if anyone is using BS 5, check the migration page as much has changed (including how cards are layed out) -- goodbye beloved jumbotron...

[FrankM]

This question is very old and has many answers, please explain why is your approach different and new?

[SidG]

It work perfectly for me and it is pretty easy. And it is also responsive becoz of min-width(in place of width)

[Wade]

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

[PraWin Pravs]

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.

[hubert17]

Not working for me. What works is class="card h-100" codeply.com/go/jbcgzs2Nzq

[Armitage2k]

thank you, this works perfectly in my BootStrap 3 project!

[Ganesan J]

Thank you, Sir . Your answer working for me

[Lionel Yeo]

Yes I can confirm this works! so simple

[khizer]

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?

[Leander]

The technically correct solution is to use a Bootstrap card decks. However this solution works 100%.