Styjun

In my case, I wanted just one set of navigation buttons / options and found that this will work:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Sign Out</a>
 </li>
 </ul>
</div>

So, you will add justify-content-end to the div and omit mr-auto on the list.

Here is a working example.

For those who is still struggling with this issue in BS4 simply try below code -

<ul class="navbar-nav ml-auto">

On Bootstrap 4

If you want to align brand to your left and all the navbar-items to right, change the default mr-auto to ml-auto

<ul class="navbar-nav ml-auto">

On Bootsrap 4.0.0-beta.2, none of the answers listed here worked for me. Finally, the Bootstrap site gave me the solution, not via its doc but via its page source code...

Getbootstrap.com align their right navbar-nav to the right with the help of the following class: ml-md-auto.

Use ml-auto instead of mr-auto after applying nav justify-content-end to the ul

If you want Home, Features and Pricing on left immediately after your nav-brand, and then login and register on right then wrap the two lists in <div> and use .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

Just add mr-auto class at ul

<ul class="nav navbar-nav mr-auto">

If you have menu list in both side you can do something like this:

<ul class="navbar-nav mr-auto">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Disabled</a>
 </li>
 </ul>
 <ul class="navbar-nav ml-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">left 1</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">left 2</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">left disable</a>
 </li>
 </ul>

use the flex-row-reverse class

<nav class="navbar navbar-toggleable-md navbar-light">
 <div class="container">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
 aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <a class="navbar-brand" href="#">
 <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
 </a>
 <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
 <ul class="navbar-nav">
 <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
 <li><a class="nav-item nav-link" href="#">Doctors</a></li>
 <li><a class="nav-item nav-link" href="#">Specialists</a></li>
 <li><a class="nav-item nav-link" href="#">About</a></li>
 </ul>
 </div>
 </div>
</nav>

Use this code for move items to right.

div class="collapse navbar-collapse justify-content-end" 

I am running Angular 4 (v.4.0.0) and ng-bootstrap (Bootstrap 4). This code won't all be relevant but hoping people can pick and choose what works. It took me sometime to find a solution to get my items to justify right, collapse properly and to implement a dropdown off my google (using OAuth) profile picture.

<div id="header" class="header">
 <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <a class="navbar-brand" href="#">
 <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
 <span class="navbar-logo-text">Oncoscape</span>
 </a>
 <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
 <ul class="navbar-nav float-left">
 <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
 <span class="fa fa-dashboard"></span>Dashboard
 </a>
 <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
 <span class="fa fa-comments"></span>Feedback
 </a>
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 <img *ngIf='user && authenticated' class="navbar-pic" src=user.thumbnail alt="Smiley face">
 </a>
 <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" (click)="toProfile()">Account</a>
 <div class="dropdown-item">
 <app-login></app-login>
 </div>
 </div>
 </li>
 </ul>
 </div>
 </nav>
</div>
<router-outlet></router-outlet>

For Bootstrap 4 beta, sample navbar with elements aligned to the right side is:

<div id="app" class="container">
 <nav class="navbar navbar-expand-md navbar-light bg-faded">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <a class="navbar-brand" href="#">Navbar</a>
 <ul class="navbar-nav mr-auto">
 <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="#">Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Pricingg</a>
 </li>
 </ul>
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href=" url('/login') ">Login</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href=" url('/register') ">Register</a>
 </li>
 </ul>
 </nav>
</div>

Using the bootstrap flex box helps
us to control the placement and alignment of your navigation element.
for the problem above adding mr-auto is a better solution to it .

<div id="app" class="container">
 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <a class="navbar-brand" href="#">Navbar</a>
 <ul class="navbar-nav mr-auto">
 <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="#">Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Pricingg</a>
 </li>
 </ul>
 <ul class="navbar-nav " >
 <li class="nav-item">
 <a class="nav-link" href=" url('/login') ">Login</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href=" url('/register') ">Register</a>
 </li>
 </ul>
 </nav>
 @yield('content')
</div>

other placement may include

fixed- top
 fixed bottom
 sticky-top

The working example for BS v4.0.0-beta.2:

<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
 <a class="navbar-brand" href="#">Navbar</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navbar-collapse" id="navbarNavDropdown">
 <ul class="navbar-nav mr-auto">
 <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="#">Features</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Pricingg</a>
 </li>
 </ul>
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Login</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Register</a>
 </li>
 </ul>
 </div>
 </nav>


 <div class="container-fluid">
 container content
 </div>

 <!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
 <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 </body>

If all above fails, I added 100% width to the navbar class in CSS. Until then mr auto wasn't working for me on this project using 4.1.

Find the 69 line in the verndor-prefixes.less and write it following:

.panel 
 margin-bottom: 20px;
 height: 100px;
 background-color: #fff;
 border: 1px solid transparent;
 border-radius: 4px;
 -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
 box-shadow: 0 1px 1px rgba(0,0,0,.05);

Just copied this from one of the getbootstrap pages for the released version 4 which worked much better than the above

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
 <ul class="section-nav">
 <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
 <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
 <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
 <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
 </ul>
</div>