Bootstrap 4 responsive card columns with equal height cards

I have a Django template that looks something like this:

<div class="container-fluid" style="padding: 25px">
    <div class="card-columns">
    {% for service in services %}
      <div class="card">
        <img class="card-img-top img-fluid" src="..." />
        <div class="card-body">
          <h5 class="card-title">Title</h5>
          <p class="card-text">Description</p>
        </div>
      </div>
    {% endfor %}
    </div>
</div>

I need the column-count to be responsive based on viewport, which I accomplished with the following css:

.card-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

@media (max-width: 48em) {
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

But now I can’t get the card height to line up. I’ve tried setting height: 100% on the card, and a plethora of other solutions that set equal heights, but all of them break the code somehow.

Most solutions suggest using either card-deck or a combination of row and col, but neither of those work in my case, because the size of the services list is dynamic.

How can I scale the number of columns based on viewport, with each row having equal height, while having a dynamic number of objects within the grid?

Answer

Did something, I hope this is what you were looking for

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex align-content-stretch flex-wrap card-columns-group">

  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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 supporting text below as a natural lead-in supporting text below as a natural lead-in supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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 additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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 ting text below as a natural lead-in ting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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 additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additing text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
  <div class="card col-12 col-sm-6 col-md-4 col-lg-3">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *