title: Bootstrap 4 Navbar-Brand Vertical Alignment
body: <p>I have not tried any code yet but wanted to ask if it was possible to have a single navbar with a center navbar brand which is positioned ontop and bottom aligned with the navbar so that if the brand grew the navbar did not?</p>
  
  <p>I would like to align the bottom of the image with the bottom of the navbar:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hdrContainer {
    background-color: #0a3782;
  }
  
  .container {
    background-color: inherit;
  }
  
  #tblHeader {
    width: 100%;
    /*font-size: .8125rem;*/
    font-size: 1rem;
    text-align: right;
    color: #ffffff;
    font-weight: bold;
  }
  
  #tblHeader tr {
    height: 50px;
  }
  
  .breadcrumb {
    background-color: inherit;
    margin-bottom: initial;
    font-weight: bold;
  }
  
  .breadcrumb .active {
    color: inherit;
  }
  
  #socialbrand {
    text-align: right;
  }
  
  #mainNavbar {
    background-color: gray;
  }
  
  #mainNavbar .container .navbar {
    position: relative;
    z-index: 0;
    max-height: 40px;
  }
  
  .navbar-brand {
    position: relative;
    z-index: 1;
    margin-right: initial;
  }
  
  .form-control {
    width: 200px;
  }
  
  .btn-outline-navy {
    color: #f6b40e;
    background-color: transparent;
    background-image: none;
    border-color: #f6b40e;
  }
  
  body {}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;body&gt;
    &lt;div id="hdrContainer" class="container-fluid"&gt;
      &lt;div class="container"&gt;
        &lt;table id="tblHeader"&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;nav aria-label="breadcrumb" role="navigation"&gt;
                  &lt;ol class="breadcrumb"&gt;
                    &lt;li class="breadcrumb-item active" aria-current="page"&gt;Commander, Naval Surface Force, US Pacific&lt;/li&gt;
                  &lt;/ol&gt;
                &lt;/nav&gt;
              &lt;/td&gt;
              &lt;td id="socialbrand" style="display: block; padding: .75rem 1rem;"&gt;Follow Us |
                &lt;i class="fa fa-facebook-square" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;i class="fa fa-twitter-square" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;i class="fa fa-flickr" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;i class="fa fa-wordpress" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;i class="fa fa-youtube-square" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td colspan="2"&gt;
                &lt;nav class="navbar navbar-light"&gt;
                  &lt;form class="form-inline"&gt;
                    &lt;input class="form-control form-control-sm ml-auto mr-sm-2 float-right" type="search" placeholder="Search" aria-label="Search"&gt;
                    &lt;button class="btn btn-sm btn-outline-navy my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
                  &lt;/form&gt;
                &lt;/nav&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="mainNavbar" class="container-fluid"&gt;
      &lt;div class="container"&gt;
        &lt;nav class="navbar navbar-expand-lg navbar-light"&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;ul class="navbar-nav ml-auto mr-auto"&gt;
              &lt;li class="nav-item active"&gt;
                &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item dropdown"&gt;
                &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Dropdown
                                  &lt;/a&gt;
                &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;!-- Just an image --&gt;
            &lt;a class="navbar-brand mr-auto ml-auto" href="#"&gt;
              &lt;img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt=""&gt;
            &lt;/a&gt;
            &lt;ul class="navbar-nav ml-auto mr-auto"&gt;
              &lt;li class="nav-item active"&gt;
                &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item dropdown"&gt;
                &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Dropdown
                                  &lt;/a&gt;
                &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown1"&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
                  &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
                  &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>