How Make Bootstrap 4 Card Decks Same Width Each Row?

I am displaying 4 cards each row using a card deck:

Solution 1:

Don't put .card-deck in a .row. Only .col- columns should be placed in rows...

content must be placed within columns and only columns may be immediate children of rows.

You should use...

<div class="row">
 <divclass="col-12"><divclass="card-deck"><!-- 4 of these --><divclass="card"><imgclass="card-img-top img-adjusted" ><divclass="card-body">...</div></div></div></div></div>

The 2nd part of the question...

When using card-deck (and card-group), cards will always fill the width of the next visual row. If you have less than 4 cards in each row, the remaining cards will fill the width across. To workaround this, set a max-width for each card..

.card-deck.card {
    max-width: calc(25% - 30px);
}

https://www.codeply.com/go/ygvZvjsELs

Alternatively, You can use the grid columns to wrap the cards. This is explained here: Bootstrap 4 card-deck with number of columns based on viewport

Share