Bootstrap: Card Groups and Decks don't play nicely with footers

[lunged]

Applying a footer to cards arranged as groups or decks doesn't work as expected.

The footer only appears at the bottom of the card(s) with the tallest content. The footer simply appears below the content in all other cards, not at the bottom.

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

 <div class="card">
  <img class="card-img-top" src="img/image.jpg" alt="Card image cap">
  <div class="card-block">
   <h4 class="card-title">Card title</h4>
   <p class="card-text">Content in Here.</p>
  </div>
  <div class="card-footer"><a class="btn btn-block btn-success-outline">BUTTON</a></div>
 </div>
...

</div>
</div>

[hnrch02]

Could you please provide a live example on JS Bin, as per our contributing guidelines?

[kkirsche]

CSS:
http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css

JS:
http://v4-alpha.getbootstrap.com/dist/js/bootstrap.min.js

Probably a few other things like tether and whatnot need to be included but I don't have a template for V4 together

[lunged]

It doesn't seem to be working right now, but here is what I threw together.

http://jsbin.com/ziqebuyuti/edit?html,output

(Sorry, first time ever bug reporting)

[hnrch02]

https://output.jsbin.com/biroye/3/quiet

[danimalweb]

Here is my JSBin showing a simple example:

https://jsbin.com/hecuvupewu/edit?output

[danimalweb]

Anyone able to take a look at this?

[limitlis]

I think I've got a fix: https://jsbin.com/datemimane/2/edit?css,output

Though this would only help when $enable-flex is true.

within _card.scss:

@if $enable-flex {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-right: -.625rem;
    margin-left: -.625rem;

    .card {
      display: flex;
      flex: 1 0 0;
      flex-direction: column;
      margin-right: .625rem;
      margin-left: .625rem;

      .card-block {
        flex-grow: 1;
      }
    }
  }
}

Haven't worked out a fix for when its off yet though.

[twbs-lmvtfy]

Hi @limitlis!

You appear to have posted a live example (https://jsbin.com/datemimane/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 45, column 36 thru column 62: Forbidden code point U+0003.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[mattantonelli]

This CSS workaround adapted from here resolves @danimalweb's example above:

https://jsbin.com/muxovozeze/1/edit?css,output

[aRestless]

Please note that the fix posted by @limitlis also stretches small images to the full width of the card, without preserving aspect ratio.

Edit: Simply adding align-items: flex-start; to .card solves this, but might have other implications.

[mdo]

Fixed in this commit: 40c982e20fbd8a985659c9341c75585f5df269d0.