title: Bootstrap 4 navbar with large image
body: <p>I need to add a large image (240px height) to a bootstrap 4 navbar. The branding text and the navigation links should be aligned to the bottom of the image.</p>
  
  <p>I tried adding align-bottom, using different divs, etc. but didn't managed to get the links down to the bottom.</p>
  
  <p>The last resort would be to add a padding-top (or margin-top) with the height of the image. But I want to avoid this since the image may change it's size depending on the device.</p>
  
  <p>Any help?</p>
  
  <p>Here is the demo code: <a href="https://jsfiddle.net/8n2oxtwt/" rel="nofollow noreferrer">https://jsfiddle.net/8n2oxtwt/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Navbar Template for Bootstrap&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
  
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;nav class="navbar navbar-expand navbar-dark bg-dark"&gt;
        &lt;a class="navbar-brand" href="#"&gt;&lt;img src="https://cdn.stocksnap.io/img-thumbs/960w/DOHH1Q2PPE.jpg" height="240px"&gt; Test&lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" 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="navbarsExample02"&gt;
          &lt;ul class="navbar-nav 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;/ul&gt;
          &lt;form class="form-inline my-2 my-md-0"&gt;
            &lt;input class="form-control" type="text" placeholder="Search"&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
        &lt;main role="main"&gt;
          &lt;div class="jumbotron"&gt;
            &lt;div class="col-sm-8 mx-auto"&gt;
              &lt;h1&gt;Navbar examples&lt;/h1&gt;
              &lt;p&gt;This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a &lt;code&gt;.container&lt;/code&gt;. For positioning of navbars, checkout the &lt;a href="../navbar-top/"&gt;top&lt;/a&gt; and &lt;a href="../navbar-top-fixed/"&gt;fixed top&lt;/a&gt; examples.&lt;/p&gt;
              &lt;p&gt;At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.&lt;/p&gt;
              &lt;p&gt;
                &lt;a class="btn btn-primary" href="../../components/navbar/" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/div&gt;
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;    
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>