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>