title: Vertical center text in bootstrap fixed bottom nav
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/308cb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/308cb.png" alt="enter image description here" /></a></p>
  <p>CSS</p>
  <pre><code>    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;}
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;nav class=&quot;nav nav-pills nav-fill fixed-bottom&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;d-flex center-vertical&quot;&gt;
              &lt;div class=&quot;bg-primary flex-fill p-2&quot;&gt;&lt;i class=&quot;fa-solid fa-arrow-rotate-left&quot;&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class=&quot;bg-success flex-fill p-2&quot;&gt;&lt;i class=&quot;fa-brands fa-whatsapp&quot;&gt;&lt;/i&gt;&lt;br/&gt;Whatsapp&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>