title: How to align Bootstrap 4 navbar items to bottom
body: <p>I'm trying to align the text of the navbar items lowerin bootstrap 4. My idea was to align them to the bottom of the ul and then position the ul but I seem to fail to do both. The goal is to have the text (approximately) at the same height of the brand like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2ZafH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2ZafH.png" alt="enter image description here"></a></p>
  
  <p>I have found some questions but most of them are for bootstrap 3 or don't work for some reason I don't understand.</p>
  
  <p>This is example html:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top"&gt;
      &lt;a class="navbar-brand" style="font-family: sans-serif; font-weight: 800; font-style: italic; font-size:xx-large;"&gt;Brand&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item" &gt;
                  &lt;p style="vertical-align:bottom;" &gt;Test&lt;/p&gt;
              &lt;/li&gt;
              &lt;li class="nav-item&lt;?php addActiveClass('/index.php'); ?&gt;"&gt;
                  &lt;a class="nav-link" href="index.php"&gt;Test&lt;/a&gt;
              &lt;/li&gt;
      &lt;li class="nav-item d-none d-md-block"&gt;&lt;img src="" id="profileImage" height="40" width="40" style="margin-right: 10px; border-radius: 5px;"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I use <a href="https://bootswatch.com/4/lumen/bootstrap.css" rel="nofollow noreferrer">this bootstrap theme</a> and example css:</p>
  
  <pre><code>.navbar
  {
      padding:0rem 0.75rem;
  }
  .navbar-brand
  {
      padding: 0;
      margin:0;
  }
  
    .navbar-nav &gt; li
      {
          line-height: 36px;
          padding: 0;
          margin: 0;
          background: red;
      }
  
    .navbar-nav &gt; li &gt; a 
      {
          padding: 0;
          margin: 0;
          background: red;
          vertical-align: bottom;
      }
      .navbar-nav &gt; li &gt; p 
      {
          padding: 0;
          margin: 0;
          background: yellow;
          vertical-align: bottom;
      }
  </code></pre>
  
  <p>A complete example is available here:
  <a href="https://jsfiddle.net/d6n5z3gb/8/" rel="nofollow noreferrer">https://jsfiddle.net/d6n5z3gb/8/</a></p>