CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4responsive-design
bovender
bovender

Reputation: 1960

Responsive cards with aligned footers in Bootstrap 4.4

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

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?

Upvotes: 0

Views: 388

Answers (1)

Holger Koenemann
Holger Koenemann

Reputation: 40

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)

Upvotes: 0

Related Questions