Vertical center text in bootstrap fixed bottom nav

Question

How can I make the bottom nav with equal height and fill it with colour? I don't want to fix the height of the nav as the text in the nav may be different.

CSS

    nav div { text-align: center; }
    nav .container-fluid { padding: 0; }
    .fa-brands,
    .fa-solid { font-size: 2em; color: #fff; }
    .center-vertical { display: flex; align-items: center;}

HTML

<nav class="nav nav-pills nav-fill fixed-bottom">
    <div class="container-fluid">
        <div class="d-flex center-vertical">
            <div class="bg-primary flex-fill p-2"><i class="fa-solid fa-arrow-rotate-left"></i></div>
            <div class="bg-success flex-fill p-2"><i class="fa-brands fa-whatsapp"></i><br/>Whatsapp</div>
        </div>
    </div>
</nav>

Answer 1

Add the CSS rule align-items: stretch to your flex container.

.container {
  display: flex; /* or inline-flex */
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

^{(source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/)}

You can learn more about Flexbox's capabilities with this comprehensive and simple guide.

Answer 2

height of two box is equal by default. also instead of flex-fill use w-50 for equal width. also if you want align items center in boxes you should use d-flex and align-items-center classnames in boxes.
now you no longer need flex-fill and center-vertical classes.
so your html will be:

<nav class="nav nav-pills nav-fill fixed-bottom">
    <div class="container-fluid">
        <div class="d-flex">
            <div class="bg-primary p-2 w-50 d-flex align-items-center">
                <i class="fa-solid fa-arrow-rotate-left"></i>
            </div>
            <div class="bg-success p-2 w-50 d-flex align-items-center">
                <i class="fa-brands fa-whatsapp"></i><br />Whatsapp
            </div>
        </div>
    </div>
</nav>