CSS: Bootstrap menu item right align - css

Question

I added a menu item called Registration and am trying to have it right aligned using custom.css. (I can't post a screenshot of it due to lack of reputation as this is my first post here)
The following is what I currently have in custom.css
li.nav-registration {
text-align: right;
float: right;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Home</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
<li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
</ul>
</div>
</div>
</nav>
The styles in custom.css are being properly styled. However, the 'Registration' menu is still not being right aligned - any help with this would be appreciated.

Answer 1

As I understand you will have to create 2 separate navbar elements. One for About, Music, Video, Contact and one for Registration:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Music" asp-action="Index">Music</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Video">Video</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-registration"><a asp-area="" asp-controller="Home" asp-action="Registration">Registration</a></li>
</ul>
</div>
You are not stating if you are using Bootstrap v3 or v4. Either way, the solution is the same that you will have to separate the 2 "navs". It's just the classes that you need that will change based on the bootstrap version.
Bootstrap 3 example:
https://getbootstrap.com/examples/navbar/
Bootstrap 4 navbar code:
https://v4-alpha.getbootstrap.com/components/navbar/#supported-content