I am new to Bootstrap and I have been working on getting to know the navbar. I notice that when the browser is full (widescreen) width, the brand title and nav anchors keep toward the left center of the page, instead of aligning to the very left of the page, as it does when the window is smaller. How can I make the text in the navbar hug the left of the page? Regardless of how wide the browser window gets I’d like to be able to make it stick to the left of the window. Is there a particular reason not to do this?
Here is a live demo on jsFiddle. Notice that if you pull the handle and widen the viewport as much as possible to the left, the text will eventually move toward the center of the navbar.
My navbar markup is the same from the starter demo provided with bootstrap, I know the responsive features and icons aren’t hooked up in the fiddle, however they are working on my local project and are not relevant to the question. I imagine I need to text-align left my custom CSS, however my attempts to apply this have failed. Any help would be much appreciated.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
</div>
The brand is “centered” because it is inside a container div and this container div is always centered with varying width based on the width of your view-port or browser window.
I would advice that you keep it that way because it gives it a more symmetrical look. If you still want to change it, all you need to do is remove the brand link from the container div. Like so: