Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap align navbar items to the right

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.

Picture of Navbar

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> 
like image 956
Luuk Wuijster Avatar asked Jan 06 '17 20:01

Luuk Wuijster


People also ask

How do I align a search box to the right in bootstrap 4?

Bootstrap allows us to align elements by using the utility class float. As we want to align the button to the right side of the text box, we have to use the float-right class. Example: html.

What is Bootstrap 4 navbar right alignment?

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

How do I align items to the left of a navbar?

The .me-auto class is used to align items to the left of that navbar. Here is the output of the above program where links are aligned to the left, the brand name to the center, and the search field to the right within the navbar. Hence we can use margin utilities to align the items within the navbar to left, right, or center.

How to align the last menu item to the right in Bootstrap?

If you have a Bootstrap navbar and want to align its last menu item to the right, this snippet is for you. So, to align the last menu item to the right, we use "w-100" on "navbar-nav" and "ml-auto" on "dropdown". Also, note that the navbar-toggleable-* classes have changed to navbar-expand-*. Let’s see an example.

How to show activity on bootstrap navbar?

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: Show activity on this post. In bootstrap v4.3 just add ml-auto in <ul class="navbar-nav"> Ex: <ul class="navbar-nav ml-auto"> Show activity on this post.


2 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 class="navbar navbar-expand-lg navbar-light bg-light">     <div class="container-fluid">         <a class="navbar-brand" href="#">Brand</a>         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>         </button>         <div class="collapse navbar-collapse" id="navbarContent">             <ul class="navbar-nav me-auto mb-2 mb-lg-0">                 <li class="nav-item">                     <a class="nav-link active" href="#">Home</a>                 </li>                 <li class="nav-item">                     <a class="nav-link" href="#">Link</a>                 </li>             </ul>             <ul class="navbar-nav">                 <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>                     <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">                         <li><a class="dropdown-item" href="#">Action</a></li>                         <li><a class="dropdown-item" 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 class="navbar navbar-expand-md navbar-light bg-light">     <a class="navbar-brand" href="#">Navbar</a>     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">         <span class="navbar-toggler-icon"></span>     </button>     <div class="collapse navbar-collapse" id="navbarNav">         <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="#">Pricing</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> 

https://codeply.com/go/P0G393rzfm

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

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">   <div class="container-fluid">     <a class="navbar-brand" href="#">Brand</a>     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">       <span class="navbar-toggler-icon"></span>     </button>     <div class="collapse navbar-collapse justify-content-end" id="navbarNav">       <ul class="navbar-nav">         <li class="nav-item">           <a class="nav-link active" aria-current="page" href="#">Contact</a>         </li>         <li class="nav-item">           <a class="nav-link" href="#">Pricing</a>         </li>         <li class="nav-item">           <a class="nav-link" 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 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

enter image description here

enter image description here

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

like image 50
Zim Avatar answered Sep 21 '22 15:09

Zim


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.

like image 30
Craig van Tonder Avatar answered Sep 18 '22 15:09

Craig van Tonder