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.
<div>
around the <ul>
with the atribute: style="float: right"
<div>
around the <ul>
with the atribute: style="text-align: right"
<li>
tags!important
added to the endnav-item
to nav-right
in the <li>
pull-sm-right
class to the <li>
align-content-end
class to the <li>
<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>
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.
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
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.
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.
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.
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-nav
s, 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
Related: Bootstrap NavBar with left, center or right aligned items
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With