CODEWITHSUNDEEP
htmlcsstwitter-bootstrapwidth
B.B King
B.B King

Reputation: 39

full width navbar using bootstrap

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

enter image description here

Code in jsfiddle

Upvotes: 0

Views: 9070

Answers (2)

brbcoding
brbcoding

Reputation: 13586

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"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></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.

Upvotes: 4

Lewes
Lewes

Reputation: 317

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%; }

Upvotes: 1

Related Questions