bootstrap4-card-deck-responsive.md

I've managed to find a way of having cards in the responsive system while having equal heights just like a deck. I found most of the solution here, option 4: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Not all of this CSS is required as some options are already enabled by Bootstrap. I enable it by adding the CSS class 'equal-height' to a row which then has cards contained within responsive columns:

.row.equal-height {
    display: flex;
    flex-wrap: wrap;
}
.row.equal-height > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

.card {
    flex: 1;
}

basic html structure:

<div class="row equal-height">
    <div class="col-12 col-md-6">
        <div class="card">
            <!-- Your card content here -->
        </div>
    </div>
</div>

edit: the value 'flex: 1 0 0;' I was using on class .card was causing problems. Safari is happy with 0 but Chrome expects 0%. Being honest I don't understand what flex-shrink and flex-basis do but specifying flex: 1; so only setting the flex-grow value works in all the browsers I tested.

Responsive Card Decks #20321

Thanks mate - still works 2018.