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 wha

Answer 1

Bootstrap 4 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.

    Navbar
    
        
    
    

        

            

                Home (current)
            
            

                Features
            
            

                Pricing
            
        
        

            

                Login
            
            

                Register
            
        
    

https://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,

 

     

               ..
     
     

           ..
     
 

---

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