<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>