bootstrap 4 card-deck containing cards with different width

Question

I am trying to use a card-deck in bootstrap 4 which contain cards with different width.

For single cards you do the following to change the width (or us

Answer 1

As indicated in the docs, the card-deck is equal width cards. If you want different width wrap the cards in the Bootstrap grid...

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/8qpkLw5Dfv

Or, use custom CSS to set the flex basis and max-width of the card-deck cards...

.card-deck .cw-30 {
    flex: 1 0 30%;
    max-width: 30%;
}

.card-deck .cw-70 {
    flex: 1 0 70%;
    max-width: 70%;
}

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

---

Related: Cards with different sizes in Bootstrap 4 card-group