Bootstrap 4 align navbar items to the right

Question

How do I align a navbar item to right?

I want to have the login and register to the right. But everything I try does not seem to work.

This is what I have tried so far:

• <div> around the <ul> with the atribute: style="float: right"
• <div> around the <ul> with the atribute: style="text-align: right"
• tried those two things on the <li> tags
• tried all those things again with !important added to the end
• changed nav-item to nav-right in the <li>
• added a pull-sm-right class to the <li>
• added a align-content-end class to the <li>

This is my code:

<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">
      <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>

Answer 1

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

Answer 2

Bootstrap 4 has many different ways to align navbar items. float-right won't work because the navbar is now flexbox.

You can use the new mr-auto for auto right margin on the 1st (left) navbar-nav. Alternatively, ml-auto could be used on the 2nd (right) navbar-nav , or if you just have a single navbar-nav.

<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>
</div>

http://www.codeply.com/go/P0G393rzfm

There are also flexbox utils. In this case, you have 2 navbar-navs, so justify-content-between in navbar-collapse would work the even the space between them,

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

---

Update for Bootstrap 4.0 and newer

As of Bootstrap 4 beta, ml-auto will still work to push items to the right. Just be aware the the navbar-toggleable- classes have changed to navbar-expand-*

Updated navbar right for Bootstrap 4

---

Another frequent Bootstrap 4 Navbar right alignment scenario includes a button on the right that remains outside the mobile collapse nav so that it is always shown at all widths.

Right align button that is always visible

---

Related: Bootstrap NavBar with left, center or right aligned items

Answer 3

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>

Answer 4

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>

Answer 5

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.

Answer 6

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.