Using .d-flex and .flex-fill to make cards the same height

Question

Based on the answer found there : How to make Bootstrap 4 cards the same height in card-columns?

I managed to make some cards have the same height and width within another card.

But in this following case, the heights are not the same.

What am I doing wrong ?

<div class="row row-cols-1 row-cols-md-2">
<div class="d-flex col mb-3">
    <doors class="flex-fill">
        <div class="card">
            <div class="card-header"> AAA </div>
            <div class="card-body">
                <ul class="list-group">
                    <door>
                        <li class="list-group-item">A1</li>
                    </door>
                    <door>
                        <li class="list-group-item">A2</li>
                    </door>
                </ul>
            </div>
        </div>
    </doors>
</div>
<div class="d-flex col mb-3">
    <commands class="flex-fill">
        <div class="card">
            <div class="card-header"> BBB </div>
            <div  class="card-body">
                <ul class="list-group">
                    <command>
                        <li class="list-group-item">B1</li>
                    </command>
                    <command>
                        <li class="list-group-item">B2</li>
                    </command>
                    <command>
                        <li class="list-group-item">B3</li>
                    </command>
                </ul>
            </div>
        </div>
    </commands>
</div>

This is the compiled html out of my angular application that I have cleaned up for easier reading.

I tried to move the .flex-fill to the card and the .d-flex to the card direct parent and a few other variants, but the result stays the same.

You can see it live here : https://codepen.io/Ell0ne/pen/QWKGNRd

score 3 · Accepted Answer · edited Aug 18 '23 at 07:41

The columns are the same height, but the cards need to fill the height of the columns. Use h-100 for this...

<div class="row row-cols-1 row-cols-md-2">
    <div class="d-flex col mb-3">
        <doors class="flex-fill">
            <div class="card bg-inf h-100">
                <div class="card-header"> AAA </div>
                <div class="card-body">
                    <ul class="list-group">
                        <door>
                            <li class="list-group-item">A1</li>
                        </door>
                        <door>
                            <li class="list-group-item">A2</li>
                        </door>
                    </ul>
                </div>
            </div>
        </doors>
    </div>
    <div class="d-flex col mb-3">
        <commands class="flex-fill">
            <div class="card h-100">
                <div class="card-header"> BBB </div>
                <div class="card-body">
                    <ul class="list-group">
                        <command>
                            <li class="list-group-item">B1</li>
                        </command>
                        <command>
                            <li class="list-group-item">B2</li>
                        </command>
                        <command>
                            <li class="list-group-item">B3</li>
                        </command>
                    </ul>
                </div>
            </div>
        </commands>
    </div>
</div>

https://codeply.com/p/ouWsT4CuSb

I'm a bit confused, I have it working without the `h-100` on cards within another card. Anyway the `h-100` fixed it in this case. Thanks. — Ellone, Dec 10 '20 at 18:55

Using .d-flex and .flex-fill to make cards the same height

1 Answers1