title: Bootstrap 4 Navbar align right
body: <p>I am working on a navbar template from Bootstrap 4 website but I'm having a problem regarding the posistion of the collapse nav items. Originally, toggle button is placed on the left side of the navbar as well as the list items. </p>
  
  <p>But I want them to on the right side of the page, so I inserted a float-xs-right class on the button and nav items. Then if I click the toggle button, the collapse items are not positioned properly. As you can see on the screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/EFzrH.png" rel="nofollow">Navbar screenshot</a></p>
  
  <p>I want the collapse items to be positioned below and on the left side.</p>
  
  <p>Btw, here's my code: </p>
  
  <pre><code>&lt;nav class="navbar navbar-light bg-faded"&gt;
   &lt;button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;/button&gt;
   &lt;a class="navbar-brand" href="#"&gt;Tribute Page | Tupac Shakur&lt;/a&gt;
  
   &lt;div class="collapse navbar-toggleable-md" id="main-navbar"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Bio&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Gallery&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Details&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;Awards&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" href="#"&gt;More info&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Also, here's my codepen for this navbar: </p>
  
  <p><a href="http://codepen.io/marcvs/pen/PGvqBO" rel="nofollow">http://codepen.io/marcvs/pen/PGvqBO</a></p>
  
  <p>Thank you in advance. </p>