fix: prevent button gap in equal-height card rows

Lera Shuklinarequested to merge
fix-equal-height-card-button-gap into 2.0.x

Problem

When cards have different amounts of content, Bootstrap's .card-body { flex: 1 1 auto } causes card-body to fill all available space in the flex-column card-content. This pushes the footer button to the bottom, creating a large visual gap between description text and the button on shorter cards.

Additionally, h-100 (height: 100% !important) on card-content creates a circular height dependency inside a flex-column .card: card height = img-wrapper + card-content, but card-content tries to be 100% of card.

Solution

  • Remove h-100 from card-content in the item template
  • Add flex: 1 0 auto on .card-content — fills remaining card space after img-wrapper (replaces the circular h-100)
  • Add flex: 0 0 auto on .card-body — overrides Bootstrap's flex: 1 1 auto, keeps body at natural content height so the button stays near the text
  • Add flex-shrink: 0 on .card-img-wrapper — prevents image area from compressing

Applies to all three card variations: standard, chevron, color.

Merge request reports