Flex and vertical align problems

Hello, i have a issue with the vertical align, y have a panel with a header, body with grid with rows and columns inside. and a footer with also a row with two columns. I try to give the text a vertical align but even with flex option turned on and using a container before a row, i couldn’t until now. Can you help me with this? I attache the footer part but it happen in the body also, always with the heading text, the image are aligned.
Thanks!

<footer class="bg-light">
<div class="container d-flex justify-content-center hook-footer-container">
    <div class="row flex-fill hook-footer-container">
        <div class="col d-flex justify-content-center align-content-center align-self-center">
            <h5>Status:</h5>
        </div>
        <div class="col d-flex justify-content-center align-self-center">
            <h5 class="text-center text-sm-center text-md-center text-lg-center text-xl-center text-white bg-success flex-fill" id="hook-status-online">ONLINE</h5>
        </div>
    </div>
</div>
[error1|289x392](upload://9uJuzenpq8f8iLY7TVbA274YIQP.png)

Welcome to the forum! If possible can you give us a screenshot? It will help a lot in figuring what the problem might be.

I see that there is a png attached to your post, but it isn’t showing for some reason.

oh!, sorry, i don’t know what happen before, i attaching a new screenshot!
thanks
error1

I am still unclear as to what the OP’s problem is, even with the graphic.

All Bootstrap 4 headings have a default margin-bottom of .5rem. So in order to center you would need .25rem on the margin-top and .25rem on the margin-bottom. You can use the Bootstrap class my-1 to apply these changes.

<footer class="bg-light">
<div class="container d-flex justify-content-center hook-footer-container">
    <div class="row flex-fill hook-footer-container">
        <div class="col">
            <h5 class="text-center my-1" id="hook-status-online">Status:</h5>
        </div>
        <div class="col">
            <h5 class="text-center text-white bg-success flex-fill my-1" id="hook-status-online">ONLINE</h5>
        </div>
    </div>
</div>
1 Like