Search code examples
cssflexboxbulma

Stick div at the bottom of equally height cards

I'm using Bulma have a column of cards which need to have the same height regardless of the content. To achieve so I have created the following class

.equal-height
  display: flex
  flex-direction: column
  height: 100%

My HTML looks like

<div class='columns is-multiline'>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
  <div class='column is-one-fifth'>
    <div class='card equal-height'>
      <div class='card-content'>
        # CONTENT GOES HERE
      </div>
      <div class='card-footer'>
        # FOOTER GOES HERE
      </div>
    </div>
  </div>
</div>

Which produces something like

enter image description here

Now I'm trying to make the card-footer to stick at the bottom of the card like below.

enter image description here

I have tried a few things with flex but they don't really make sense. Any ideas on how I may do it?

Solution

  • Add "flex: auto;" to '.card-contents' to make the card-footer to stick at the bottom of the card. Here is the working jsfiddle link.

    .equal-height {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equal-height .card-content {
  flex: auto;
}