I am experimenting with Bootstrap to create a customized navbar. I am encountering difficulties in aligning the login and logout buttons to the right. Is there a way to achieve this? I have included my HTML and CSS code below:
HTML code:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Log-out</a></li>
<li><a href="#">Log-in</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
CSS code:
<style>
.navbar navbar-inverse .nav navbar-nav ul li a:nth-child(5):nth-child(6)
{
background-color:green;
float :right;
}
</style>