title: Bootstrap 4 – How to display items in a row when navbar is collapsed?
body: <p>I want to display some items next to each other when the window is collapsed in the navbar. Currently, it displays the items in a column like this: <a href="https://i.stack.imgur.com/DOF0z.png" rel="nofollow noreferrer">Navbar collapsed</a>. I want the image next to the username instead.</p>
  
  <pre><code> &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
  &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    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="navbarNav"&gt;
  
  
        &lt;ul class="ml-auto navbar-nav border border-primary rounded" style="background:blue"&gt;
  
          &lt;li class=" nav-item active"&gt;
            &lt;a class="nav-link" href="#"&gt;Hi, Shadow &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="something1" class="mt-auto mb-auto nav-item"&gt;
            &lt;img id="something" src="images/space_stars_blue_free_wallpaper.jpg" class="img-fluid rounded-circle "
              alt="..." width="50" height="50"&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>