Aligning items within a Bootstrap 4 .card using Flexbox

Viewed 6809

I'm using Bootstrap 4, and have a div with the card class on it, which has a fixed height. This is what I'm trying to get:

Wireframe

The code I'm using is

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h4 align-self-start">Top Left</h2>
        <div class="align-self-center">
            Middle Middle
        </div>
        <aside class="align-self-end">Bottom Right</aside>
    </div>
</div>

but the lines are all squashed together, presumably because the card-block is not expanding to the full height of the card.

FAIL

Is there a way to get the card-block to fill the card, or otherwise get this to display correctly?

1 Answers
Related