Float nav items to the right in Bootstrap 4?

Question

How do you push to the right nav items of a Bootstrap 4 navbar? I tried float-*-right but did not work.

  <nav class="navbar navbar-static-top navbar-dark bg-inverse float-*-right">
  <a class="navbar-brand" href="#">Project name</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>

I need to align the nav items to the right.

Answer 1

Add 'float-xs-right' class to the ul

<ul class="nav navbar-nav float-xs-right">

You can remove 'float-*-right' from the containing nav tag since it's not doing anything there

http://www.bootply.com/OnvcimHYD7

Answer 2

Update 2018

float-right will no longer work because the Bootstrap 4 Navbar uses flexbox. The auto-margin class (ie:ml-auto) should be used instead.

See: Bootstrap 4 align navbar items to the right