I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstrap? Thank you in advance.
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.jsp" style="color:purple;cursor: auto" id="wel">Welcome Admin</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" style="text-align:center">
<li class="active"><a href="about_epm.jsp">About EPM</a></li>
<li><a href="contact_us.jsp">Contact Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Modules <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Employer Section</a></li>
<li class="divider"></li>
<li><a href="#">Employee Section</a></li>
<li class="divider"></li>
<li><a href="#">Client Section</a></li>
<li class="divider"></li>
<li><a href="#">Project Details</a></li>
</ul>
</li>
<li class="pull-right">
<a onClick="logout();" class="navbar-brand pull-right">
<span class="glyphicon glyphicon-off" id="icon"> Logout</span>
</a>
</li>
</ul>
</div>
</div>