full width navbar using bootstrap - html

Question

I need to boorstrap full width navbar in 940px container and after header like this pic. How to ?
Code in jsfiddle

Answer 1

This is how you would do it in a "bootstrappy" way...
/* put the stuff you want NOT to span 100% in a container */
<div class="container">
/* wrap the grouping in a row */
<div class="row">
/* left center and right classes are unneeded.*/
/* Just used to show color in the fiddle */
<div class="span3 left">Header Left</div>
<div class="span6 center">Header Center</div>
<div class="span3 right">Header Right</div>
</div>
</div>
/* navbar outside the container will span 100% */
<div class="navbar">
<div class="container">
<div class="navbar-inner">
<div class="span12">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
</div>
/* back into a container so it doesn't span the full width */
<div class="container">
<div class="row">
<div class="span12 content">Content</div>
</div>
</div>
DEMO
EDIT: Updated to reflect requirements of navlinks inside container.

Answer 2

You need a container, to hold the header and the content.
For example:
<div class="container">
<div id="headerleft"></div>
<div id="header"></div>
<div id="headerright"></div>
</div>
<div id="nav"></div>
<div class="container">
<div id="content"></div>
</div>
And the CSS would be similar to this:
.container { width: 75%; }
#nav { width: 100%; }