Question regarding vertical alignment in bootstrap 4

I want to vertically align the card-body class div, so that it is in the middle of the screen. I’ve tried using “my-auto” and “align-center”, but to no avail. Here’s the code pen:

Thank you anyone who’s able to help.


Looks like you are after the follwoing when dealing with bootstrap and vertical alignment.
<span class="align-middle">middle</span>


1 Like

I don’t know the proper way to do this with Bootstrap 4, but I can tell you that the card-body div takes the whole height of its parent and the <p> is vertically aligned within it. It’s just that the <p> has a margin-bottom of 1rem and a margin-top of 0. If you want the text to look centred vertically you’ll need both margins to be equal.

1 Like