Bootstrap 4/5 Equal Height Cards using Grid and Flexbox Utilities
Bootstrap 5
Grid Cards Example using the BS5 Grid, but with some adjustments for matching the height.
https://getbootstrap.com/docs/5.0/components/card/#grid-cards
https://www.codeply.com/p/GtiPUqDXW7
<div class="row row-cols-1 row-cols-md-3 mb-3"> <div class="col mb-2"> <div class="card h-100"> <div class="card-body"> Card. I'm just a simple card-block. </div> </div> </div> <div class="col mb-2"> <div class="card h-100 bg-danger text-white"> <div class="card-body"> <h3 class="card-title">Danger</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-light">Outline</a> </div> </div> </div> <div class="col mb-2"> <div class="card h-100"> <div class="card-body"> Card. I'm just a simple card-block, but I have a little more text! </div> </div> </div> </div> <div class="row row-cols-1 row-cols-md-3 mb-3"> <div class="col mb-2"> <div class="card h-100 border-primary"> <div class="card-body"> <h3 class="card-title">Primary</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-secondary">Outline</a> </div> </div> </div> <div class="col mb-2"> <div class="card h-100"> <div class="card-body"> Card. I'm just a simple card-block. </div> </div> </div> <div class="col mb-2"> <div class="card h-100 bg-info bg-gradient"> <div class="card-body"> <h3 class="card-title">Hello</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-light">Outline</a> </div> </div> </div> </div>
Bootstrap 4
https://www.codeply.com/go/FEW9U4ZElQ/bootstrap-4-equal-height-cards-flexbox-utils
<div class="container"> <h5>Bootstrap 4 Equal Height Cards using Grid and Flexbox Utilities</h5> <div class="row equal"> <div class="col-sm-4 d-flex pb-3"> <div class="card card-block"> Card. I'm just a simple card-block. </div> </div> <div class="col-sm-4 d-flex pb-3"> <div class="card card-inverse card-danger"> <div class="card-block"> <h3 class="card-title">Danger</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-secondary">Outline</a> </div> </div> </div> <div class="col-sm-4 d-flex pb-3"> <div class="card card-block"> Card. I'm just a simple card-block, but I have a little more text! </div> </div> <div class="col-4 d-flex pb-3"> <div class="card card-outline-primary"> <div class="card-block"> <h3 class="card-title">Primary</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-secondary">Outline</a> </div> </div> </div> <div class="col-sm-4 d-flex pb-3"> <div class="card card-block"> Card. I'm just a simple card-block. </div> </div> <div class="col-sm-4 d-flex pb-3"> <div class="card card-inverse card-primary"> <div class="card-block"> <h3 class="card-title">Hello</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-outline-secondary">Outline</a> </div> </div> </div> </div> </div>