By bovender


2020-02-12 15:55:00 8 Comments

With Bootstrap 4.4, I would like to have a deck of cards with:

  • equal height (.h-100)
  • a .card-footer aligned at the bottom
  • responsive layout with the number of cards per row defined by the viewport width

It seems that I can't have all three of them at the same time, is that true?

To get the card footers to align at the bottom of the cards, one would place them inside a .card-deck div, but that does not agree at all with <div class="col-sm-12 col-md-6 col-lg-4"> for example. I have also tried to add a .row-cols-x class to the parent .row, but that does not work either.

Is it possible after all?

1 comments

@Holger Koenemann 2020-02-14 08:49:49

You can use the card-deck component to archive the first both points on your list. Here is an example:

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural 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 class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

To archive the third point you can extend it in your scss files via:

.card-deck {
  @include media-breakpoint-only(xs) {
    column-count: 1;
  } 
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }  
@include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

This sets the number of columns per breakpoint. That overwrites the default behavior (having always 3 columns, but just on on xs)

@bovender 2020-02-15 05:42:53

Doesn't work here, I get 5 columns from sm to xl and one column with xs. Confirmed that the SCSS compiled all right in dev tools, the column-count property is there. Possibly some glitch in my setup elsewhere that interferes? I'll investigate. Thanks for your suggestion though!

Related Questions

Sponsored Content

9 Answered Questions

[SOLVED] Missing visible-** and hidden-** in Bootstrap v4

6 Answered Questions

[SOLVED] Bootstrap - align button to the bottom of card

23 Answered Questions

[SOLVED] vertical-align with Bootstrap 3

11 Answered Questions

11 Answered Questions

12 Answered Questions

[SOLVED] Change navbar color in Twitter Bootstrap

3 Answered Questions

Sponsored Content