title: Stacked collapsible navbar in bootstrap 4
body: <p>I would like to create a collapsible <code>navbar</code>. Everything works, but the <code>nav</code> items aren't stacked under each other like it should be. They are horizontally next to each other.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-light bg-faded" role="navigation"&gt;
      &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar"&gt;
          &amp;#9776;
      &lt;/button&gt;
  
      &lt;div class="collapse navbar-toggleable-xs" id="collapsing-navbar"&gt;   
          &lt;a class="navbar-brand" href="/"&gt;Logo&lt;/a&gt;
  
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a href="/messages" class="nav-link"&gt;Messages&lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li class="nav-item"&gt;
                  &lt;a href="/logout" class="nav-link"&gt;Logout&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/LuzKX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LuzKX.png" alt="bootstrap4 error"></a></p>