How to left-justify some Bootstrap nav content and right-justify other content? - navbar

Question

I have a Bootstrap 5.x navbar with the following code:
<nav class="navbar navbar-expand-lg navbar-custom navbar-dark fixed-top">
<div class="container-fluid px-5">
<a class="navbar-brand" href="../main.aspx">
<img src="../images/mainlogo_150x136.jpg" class="d-inline-block align-text-middle">
</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 mr-auto mb-2 mb-sm-0">
<li class="nav-item"><a class="nav-link" runat="server" href="~/main.aspx">Home</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/directory.aspx">Directory</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/notices.aspx">Notices</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/events.aspx">Upcoming Events</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/messages.aspx">Message Center</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/aboutus.aspx">About Us</a></li>
</ul>
<ul class="navbar-nav mb-2 mb-sm-0">
<% if ( HttpContext.Current.User.Identity.IsAuthenticated ) { %>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/signout.aspx">Logout</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/myaccount.aspx">Account</a></li>
<% }
else {%>
<li class="nav-item"><a class="nav-link" runat="server" href="~/signin.aspx">Login</a></li>
<li ckass="nav-item"><a class="nav-link" runat="server" href="~/register.aspx">Register</a></li>
<%} %>
</ul>
</div>
</div>
</div>
</nav>
I am having trouble figuring out how to left-justify the main page links and, at the same time, right-justify the signin/signout and register/account links. I have tried a number of solutions I found on SO but nothing seems to work right.
Can anyone help me fix this?

Answer 1

Solved it (finally!)
Here's code that works:
<nav class="navbar navbar-expand-lg navbar-custom navbar-dark fixed-top">
<div class="container-fluid">
<div class="mx-auto">
<a class="navbar-brand" runat="server" href="~/main.aspx">
<img src="~/images/mainlogo_150x136.jpg" runat="server" class="d-inline-block align-text-middle" />
</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>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" runat="server" href="~/main.aspx">Home</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/directory.aspx">Directory</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/notices.aspx">Notices</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/events.aspx">Upcoming Events</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/messages.aspx">Message Center</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/aboutus.aspx">About Us</a></li>
</ul>
<ul class="navbar-nav d-flex mr-auto">
<% if ( HttpContext.Current.User.Identity.IsAuthenticated ) { %>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/signout.aspx">Logout</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/members/myaccount.aspx">My Account</a></li>
<% }
else {%>
<li class="nav-item"><a class="nav-link" runat="server" href="~/signin.aspx">Login</a></li>
<li class="nav-item"><a class="nav-link" runat="server" href="~/register.aspx">Register</a></li>
<%} %>
</ul>
</div>
</div>
</nav>
It required setting class="navbar-nav me-auto" on the first <ul> tag, and class="navbar-nav d-flex mr-auto" on te second <ul> tag.
Now it works as expected!