0

Bootstrap 4 Equal Height Cards using Grid and Flexbox Utilities

Posted by Chris Straw on May 8, 2020 in Bootstrap 4 |

Codeply Example

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

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copyright © 2011-2020 Chris Straw All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.