I need my navbar to be split into 12 sections so that each item occupies one section, starting from the far left of the screen. The current alignment doesn't meet this requirement as shown in the image below;
https://i.sstatic.net/irYqV.png
Despite trying with container-fluid and navbar-left, I am struggling to move the elements all the way to the left of the navbar.
This is what I have attempted in my code so far:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container container-fluid">
<div 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">Directories</a></li>
<li><a href="#">Contracts</a></li>
<li><a href="#">Processes</a></li>
<li><a href="#">Filing</a></li>
<li><a href="#">My Profile</a></li>
</ul>
</div>
</div>
</div>
@RenderBody()
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Is there a way to A) Align all items in the navbar completely to the left and B) Divide the navbar into 12 "sections" where each item takes up one?
I am using Bootstrap v3.3.7.