Bulma: How to get cards with same height in columns ?

[Wikiki]

Hi,

I have columns with cards in them and I'm trying to get those cards having the same height (the full-height of the column actually).

Do you now how to handle that ? Currently the card's height is based on its content.

Regards,

[itsmatteomanf]

I had the same exact problem yesterday, if you move to tiles they span the whole height while maintaining the same width possibilities.

Of course you could probably set height to 100% on the cards, but I haven't tested it.

[Wikiki]

Thanks for the hint.

Using tile make card fullheight but unfortunately it's missing some code to card component to always keep footer at bottom.
I had to add the following code to get it work:

.card
  width: 100%
  display: flex
  flex-direction: column

.card-footer
  margin-top: auto

[itsmatteomanf]

You could assign a .card class to the .tile.is-child without problems inheriting all the properties of the card component.

[Wikiki]

You're right its fixing the width: 100% and flex display

but I still need the following code for card-footer

.card
  display: flex
  flex-direction: column

.card-footer
  margin-top: auto

otherwise the footer is not touching the bottom for card with less content

[itsmatteomanf]

Let me get to a computer, 30 minutes or so and I’ll try it! From the phone it’s complicated writing the proposed solution in full.

[itsmatteomanf]

Nevermind, I checked and I see the problem you have. You can just do:

.tile.is-anchestor
  .tile
    .tile.is-child.card
      .card-header
      .card-content
      .card-footer

You would have to handle the footer not sticking to the bottom, but some custom code should do...

[Wikiki]

I don't see any difference with the .tile added.

@jgthms : Is it possible to add the following part of code on card component to set the footer always on bottom event when using card in tile ?

.card
  display: flex
  flex-direction: column

.card-footer
  margin-top: auto

[itsmatteomanf]

The second .tile is there just to follow Bulma's website examples. Adding the .card to the .tile allows the tiles to be the same height.

[Wikiki]

Thanks for the explanation

[jgthms]

The flex-direction column can be tricky in some contexts. I'd rather not add if it's not necessary.

[nedjo]

For the original question:

.column
  .card
    height: 100%

Or to allow an optional is-fullheight modifier on cards:

.card
  &.is-fullheight
    height: 100%

[ctolkien]

The above will make the card full height, but the card footer will not be stuck to the bottom (you'll need to do the margin-top:auto bit as well).

[stuartcusackie]

This has been answered above but just to reiterate: I found using tiles instead of columns made my cards equal heights automatically (bulma 0.7.2)

#Row
<div class="tile is-ancestor">
     <div class="tile is-parent">
          <div class="tile is-child card">
          #Card Stuff
          </div>
     </div>
     <div class="tile is-parent">
          <div class="tile is-child card">
           #Card Stuff
          </div>
     </div>
</div>

The only issue was the card-footer not touching the bottom of the card, but switching to display flex with the following setup fixed that issue:

.tile.is-child.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[J-tt]

I'd recommend doing this with the above example

.tile.is-child.card {
     .card-footer {
         margin-top: auto;
    }
    display: flex;
    flex-direction: column;
} 

Otherwise you'll get some weird spacing around the body of the card.

[noraj]

duplicate of #218