Align the top of the footers bootstrap card deck

Question

I'm using bootstrap 4 to display cards. All is working as expected. The issue I have is that if one of the footers has more content than the others, the footer is raised to accommodate this. Is there a way of the footer pushing the content down and keeping the tops aligned?

DEMO: http://jsfiddle.net/6uv9a30n/1/

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
 </div>
</div>

Current Output:

Desired Output:

If you're not putting that data dynamically, then you can preset the footer with a fixed height shared across the small-text part — Eric, Jun 12 '20 at 07:58
@eric thanks for the suggestion but the content is dynamically generated — steve, Jun 12 '20 at 08:19
Did you find a working solution? If not my approach to this would be to make small-text part scrollable with the `overflow: scroll;` property. This would also prevent the card from looking funny with too much whitespace when the data of one card increases way too much. — Eric, Jun 12 '20 at 09:35
Not w/o using a defined footer height. Flexbox children aren't aware of each others content. https://stackoverflow.com/questions/55272962/alignment-of-content-vertically-in-adjacent-flexbox-containers — Carol Skelly, Jun 12 '20 at 11:56

score 0 · Answer 1 · answered Jun 12 '20 at 08:33

This is going to be sound cheap but you can use another small HTML tag having css property transparent color so that it will always remain on top not matter how much text you add.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
        <small style="color: transparent;">Text not going to show</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>

      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
        <small style="color: transparent;">Text not going to show</small>
      </div>
    </div>
  </div>
</div>

Thanks, the only issue with this is that it would apply to all cards. There will be multiple rows, so i'd only want that row to be effected. — steve, Jun 12 '20 at 10:12

score 0 · Answer 2 · answered Jun 12 '20 at 12:28

You can do it with the flex CSS property on card-body and card-footer.

body {
  margin: 10px;
}

/* Customize Bootstrap card */
.card-deck .card-body { 
  flex: 0 0 auto;
}

/* fix footer height */
.card-footer { 
  flex: 1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >

<div class="container">
  <div class="card-deck">
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer equal">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago Last updated 3 mins ago</small>
      </div>
    </div>
    <div class="card mb-4">
      <div class="card-body">
        <h4 class="card-title">1 Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Thanks, I was really hoping this fixed it as it looked close. The issue is that they do not line up when the card-body content is different http://jsfiddle.net/ae9hp8ok/ — steve, Jun 12 '20 at 13:18

Align the top of the footers bootstrap card deck

2 Answers2