title: Bootstrap 4 navbar - justify menu to right?
body: <p>I am working with the Bootstrap 4 default navbar and I just want to justify the menu items to the right, not the left. </p>
  
  <p>This should be simple right? But I've been Googling without success for 25 minutes now.</p>
  
  <p>I've tried adding <code>ml-auto</code> and <code>justify-content-end</code> to the menu div, neither are helping. </p>
  
  <p>Here is my code: <a href="https://www.bootply.com/oZD5wplHVi#" rel="nofollow noreferrer">https://www.bootply.com/oZD5wplHVi#</a></p>
  
  <p>UPDATE: It seems I was incorrectly using Bootstrap 3, oops. I would like to use Bootstrap 4, so I have updated my example, and tried adding <code>.float-right</code> (<a href="https://www.bootply.com/n2wzGQrP1k" rel="nofollow noreferrer">code</a>):</p>
  
  <pre><code>&lt;div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md"&gt;
      &lt;div class="container"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
          &lt;button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"&gt;&amp;#x2630;&lt;/button&gt;
          &lt;div class="collapse navbar-collapse float-right"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active nav-item"&gt;&lt;a href="#" class="nav-link"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;&lt;a href="#about" class="nav-link"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;&lt;a href="#contact" class="nav-link"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But still no joy... What am I doing wrong?</p>
  
  <p>Update 2: Replaced with new clean question <a href="https://stackoverflow.com/questions/54400642/bootstrap-4-justify-menu-to-right-in-navbar">Bootstrap 4: Justify menu to right in navbar?</a> without confusing edits. </p>