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> <nav> <button type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricingg</a> </li> </ul> <ul > <li> <a href="{{ url('/login') }}">Login</a> </li> <li> <a href="{{ url('/register') }}">Register</a> </li> </ul> </nav> @yield('content')
</div>

2

23 Answers

Bootstrap 5 (update 2021)

In Bootstrap 5 (see this question), ml-auto has been replaced with ms-auto to represent start instead of left. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.

For example, use me-auto...

<nav> <div> <a href="#">Brand</a> <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Link</a> </li> </ul> <ul> <li> <a href="#" aria-expanded="false"> Menu </a> <ul aria-labelledby="navbarDropdown"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul> </li> </ul> </div> </div>
</nav>

Bootstrap 5 right align Navbar content

---

Bootstrap 4 (original answer)

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

You can use 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.

<nav> <a href="#">Navbar</a> <button type="button"> <span></span> </button> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> </ul> <ul> <li> <a href="#">Login</a> </li> <li> <a href="#">Register</a> </li> </ul> </div>
</nav>

There are also flexbox utils. For example use justify-content-end on the collapse menu:

<nav> <div> <a href="#">Brand</a> <button type="button"> <span></span> </button> <div> <ul> <li> <a aria-current="page" href="#">Contact</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#">Download</a> </li> </ul> </div> </div>
</nav>

Or when you have 2 navbar-navs, use justify-content-between in navbar-collapse would work to even the space between the navbar-navs:

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

9

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

<div> <ul> <li> <a 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.

6

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

<ul>

4

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>

1

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.

2

Use this code to move items to the right.

<div>

1

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

0

Just add mr-auto class at ul:

<ul>

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

<ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li>
</ul>
<ul> <li> <a href="#">left 1</a> </li> <li> <a href="#">left 2</a> </li> <li> <a href="#">left disable</a> </li>
</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>
<ul>....</ul>
<ul>...</ul>
</div>

0

In bootstrap v4.3 just add ml-auto in <ul>Ex:<ul>

use the flex-row-reverse class

<nav> <div> <button type="button" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#"> <i aria-hidden="true"></i> </a> <div> <ul> <li><a href="#">Home <span>(current)</span></a</li> <li><a href="#">Doctors</a></li> <li><a href="#">Specialists</a></li> <li><a href="#">About</a></li> </ul> </div> </div>
</nav>

It's little change in boostrap 4. To align navbar to right side, you've to make only two changes. they are:

1. in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100
2. in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto.

If you didn't understand, please refer the image that i've attached to this.

CodePen Link

Full source code

<nav> <a href="#">Navbar</a> <button type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricing</a> </li> <li> <a href="#" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div aria-labelledby="navbarDropdownMenuLink"> <a href="#">Action</a> <a href="#">Another action</a> <a href="#">Something else here</a> </div> </li> </ul> </div>
</nav>

0

For bootstrap 4.3.1, I was using nav-pills and nothing worked for me except this:

 <ul> <li ....</li> </ul>

In my case Bootstrap v5, I wanted just one set of navigation options to the right side:

just add "ms-auto" in ul.

And it helped me.

<div> <ul> <li> <a aria-current="page" href="index.php">Home</a> </li> <li> <a href="services.php" tabindex="-1" aria-disabled="true">Services</a> </li> <li> <a href="aboutus.php">About Us</a> </li> <li> <a href="Portfolio.php">Portfolio</a> </li> </ul> </div>

The above answers surprisingly didn't work for me so here is my approach. To align the login and register navigation bar items to the right you can make use of either of these two ways:

1. pull-right: Modify the unordered list tag for login and register as

   <ul>

2. navbar-right: Modify the unordered list tag for login and register as

   <ul>

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> <nav> <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#"> <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '> <span>Oncoscape</span> </a> <div> <ul> <a *ngIf='authenticated' (click)='goDashboard()'> <span></span>Dashboard </a> <a href=""> <span></span>Feedback </a> <li> <a aria-haspopup="true" aria-expanded="false"> <img *ngIf='user && authenticated' src={{user.thumbnail}} alt="Smiley face"> </a> <div *ngIf='user && authenticated' aria-labelledby="navbarDropdownMenuLink"> <a (click)="toProfile()">Account</a> <div> <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> <nav> <button type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricingg</a> </li> </ul> <ul> <li> <a href="{{ url('/login') }}">Login</a> </li> <li> <a href="{{ url('/register') }}">Register</a> </li> </ul> </nav>
</div>

0

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> <nav> <button type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">Navbar</a> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricingg</a> </li> </ul> <ul > <li> <a href="{{ url('/login') }}">Login</a> </li> <li> <a 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> <a href="#">Navbar</a> <button type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Features</a> </li> <li> <a href="#">Pricingg</a> </li> </ul> <ul> <li> <a href="#">Login</a> </li> <li> <a href="#">Register</a> </li> </ul> </div> </nav> <div> 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/"></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);
}

0

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

<div> <ul> <li><a href="#overview">Overview</a></li> <li><a href="#classes">Classes</a></li> <li><a href="#mixins">Mixins</a></li> <li><a href="#responsive">Responsive</a></li> </ul>
</div> 

I'm new to stack overflow and new to front end development. This is what worked for me. So I did not want list items to be displayed.

.hidden { display:none; } #loginButton{ margin-right:2px; }

<nav> <button type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <a href="#">NavBar</a> <div> <ul> <li> <a href="#">Home <span>(current)</span></a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#">Disabled</a> </li> </ul> <form> <button type="submit"><a href="#">Log In</a></button> <button type="submit"><a href="#">Register</a></button> </form> </div>
</nav>

0