3

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?

John Y
  • 1,161
  • 12
  • 23

1 Answers1

4

You can use justify-content-between on the card-block..

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

.flex-grow {
    flex: 1 0 0;
}

Demo: https://www.codeply.com/go/5dIgA0ul2q

Update 2018 Bootstrap 4 (stable) card-block is now card-body

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks — that sort-of works, but the middle line is not quite centred in the card because the h2 is taller than the aside. Is there a way to get the middle line to always be centred in the card regardless of what the other two lines are? – John Y Jul 12 '17 at 12:57
  • I think you'd have to make the child items flex too, and then use flex-grow so they fill equal space. I updated the code and demo. – Carol Skelly Jul 12 '17 at 13:19
  • Still not coming out properly centred, I'm afraid — on a card with height 253px, I'm seeing 135px space below the middle item, and only 104px above. The two values should be equal, give or take 1px — it's visibly off-centre at the moment. – John Y Jul 12 '17 at 14:58
  • I've set the line-height of the aside equal to that of the h2, which is a hack but at least produces something that looks right. Would be interested in finding a more universal solution, though. (One day, vertical centring in CSS will actually be easy :) – John Y Jul 13 '17 at 08:49