So here's where you're at: you're creating a navbar using Bootstrap 5. You've got the navigation items in place and they look great.
Except for one problem: you want a single navigation item on the right-hand side of the screen while the rest hug the left-hand side.
That's a common UI design pattern for login/register. You see it on websites all the time.
And you'd like to imitate those websites.
Fortunately, you've come to the right place. I'll show you how to do it here.
First, Let's Do the Wrong Thing
Before I can show you how to do what you want to do, let me first show you something similar to what you have now.
Take a look at this code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<title>Navbar Right Align | Carey Development</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="https://careydevelopment.us/img/branding/careydevelopment-logo-sm.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/login">Login</a></li>
<li><a class="dropdown-item" href="/register">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>Nothing too complicated going on there. It's fairly standard Bootstrap 5 navbar stuff.
Save that code to an HTML file and view it with your favorite browser. You'll see something like this at the top:
Okay that's a decent start to a UI. It's got the obligatory logo on the left-hand side and a few navigation items just to the right of it.
The Account drop-down on the right includes two items: Login and Register.
As it stands now, it's a pretty good navbar.
But you want to take things to the next level. You want that Account drop-down on the right-hand side of the page.
Just like the cool kids are doing.
You've probably already tried a few different things to make it happen. None of those things worked. So you turned to your favorite search engine and here you are.
Let's fix this together.
It's Ms. Not Mrs.
The CSS class you're looking for here is called ms-auto.
What does that do? It's a Bootstrap 5 auto margin feature that pushes everything in front of it to the left. So the element that uses it sits on the far right.
All you gots to do is create another navbar with that class and voila! You got what you're looking for.
Here's the code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<title>Navbar Right Align | Carey Development</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="https://careydevelopment.us/img/branding/careydevelopment-logo-sm.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/login">Login</a></li>
<li><a class="dropdown-item" href="/register">Register</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>Pay very close attention to the second <ul> element. That's where the fun happens. It's another navbar but it uses the ms-auto class.
That's going to push the other navbar to the left, leaving this navbar on the right.
And now if you save that code and view the file in your favorite browser, you'll see this:
Perfect. As you can see, the Account navigation item is on the right-hand side of the screen.
By the way, you could also use the me-auto class on the other navbar and push the second one to the right.
But Wait! There's Less!
Hold on, though.
At this point you should be asking yourself a very important question: does this work for mobile platforms?
That's because mobile is everything in this the Year of Our Lord 2021.
So let's answer that question by simulating a mobile device with the Chrome Dev Tools. Here's what you'll see:
In other words, yes. It works.
Sure, that Account navigation item uses a top margin that's a wee bit large. But it's not a show-stopper.
And users will have no problems finding it.
Wrapping It Up
There you go. A cool, easy way to push a navigation item to the right-hand side of the screen.
Now it's up to you. Take the code you see above and adapt it to suit your own business requirements.
Have fun!