title: Bootstrap 4 - aligning two layers of links to the top and bottom of a navbar
body: <p>I have a collection of links I'd like to align to both the top and bottom of my <code>navbar</code>.  Specifically, this arrangement:</p>
  
  <p><a href="https://i.stack.imgur.com/4ieYn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4ieYn.jpg" alt="enter image description here"></a></p>
  
  <p>After playing with Irfandy Jip's code in the answer below, and my own continued research, I've come up withn this code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;"&gt;
      &lt;a class="navbar-brand" href="{{ path('_home') }}"&gt;
          &lt;img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none"&gt;
          &lt;img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block"&gt;
      &lt;/a&gt;
  
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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="navbarSupportedContent"&gt;
          &lt;div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2"&gt;
              &lt;div class="nav-item mb-lg-5"&gt;
                  &lt;div class="btn-group"&gt;
                      &lt;button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline"&gt;
                          &lt;a class="nav-link" href=""&gt;Login&lt;/a&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline"&gt;
                          &lt;a class="nav-link" href=""&gt;Sign Up&lt;/a&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="nav-item mb-lg-5"&gt;
                  &lt;div class="btn-group btn-group-lg"&gt;
                      &lt;button class="btn btn-link p-0 m-0 d-none d-lg-inline"&gt;
                          &lt;a class="nav-link" href=""&gt;&lt;i class="far fa-envelope"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-link p-0 m-0 d-none d-lg-inline"&gt;
                          &lt;a class="nav-link" href=""&gt;&lt;i class="fab fa-facebook-square"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/button&gt;
                      &lt;button class="btn btn-link p-0 m-0 d-none d-lg-inline"&gt;
                          &lt;a class="nav-link" href=""&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;a class="nav-link d-lg-none" href=""&gt;Login&lt;/a&gt;
              &lt;a class="nav-link d-lg-none" href=""&gt;Sign Up&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search"&gt;
                  &lt;div class="input-group-append"&gt;
                      &lt;button class="btn btn-burnt-orange my-2 my-sm-0" type="button"&gt;&lt;i class="far fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/nav&gt; &lt;!-- end nav --&gt;
  </code></pre>
  
  <p>Which results in the following:</p>
  
  <p><a href="https://i.stack.imgur.com/uAMiz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uAMiz.jpg" alt="enter image description here"></a></p>
  
  <p>Which is <em>really</em> close to what I want, with the exception of how the entire <code>navbar</code> is growing at the bottom, no doubt the result of the margin's I've added (padding does the same thing).  Ideally, the social media icons would be on the same 'line' as the search bar, with the Login and Sign Up links at the top of the bar, as they currently are.</p>
  
  <p>Here's a comparison with the rough draft of the layout:</p>
  
  <p><a href="https://i.stack.imgur.com/bb5Gt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bb5Gt.jpg" alt="enter image description here"></a></p>
  
  <p>Is there anything else I can do to make the links on the right look more like the last image?</p>