Twitter Bootstrap - full width navbar

Question

Following the example of TB, I have a navbar that is marked up as follows:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.

I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?

I realized late last night that there was a bad typo in the solution I provided you. It is now fixed in [my answer below](http://stackoverflow.com/a/14736713/61654). — ahsteele, Feb 07 '13 at 15:56

Arnaud Bouchot · Answer 1 · 2015-02-21T17:08:04.493

37

Just change the class container to container-fullwidth like this :

<div class="container-fullwidth">

edited Feb 21 '15 at 17:08

answered Feb 20 '15 at 10:35

Arnaud Bouchot

1,885
1
21
19

2

This isn't a bootstrap class? – Rahat Ahmed Mar 10 '17 at 17:58

ahsteele · Answer 2 · 2013-02-07T05:15:56.910

Not sure if the navbar-static-top class was available prior to version 2.2.2 but I think you can accomplish your goal with the following:

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

I put together a jsFiddle as an example.

RRikesh · Answer 3 · 2012-10-26T11:48:49.147

24

Put the navbar out of your container:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

EDIT:

Here is one that I did with responsive navbar. The code fits the document body:

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <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>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>

edited Oct 26 '12 at 11:48

answered Oct 26 '12 at 11:24

RRikesh

14,112
5
49
70

1

It doesn't work well: 1.) still has rounded corners, 2.) horizontal scroll bar appears as I resize the browser, 3.) at small screen width, it no longer spans the full width of the browser. – StackOverflowNewbie Oct 26 '12 at 11:42
Updated my answer with some snippet which I used. Did you include the responsive CSS and viewport meta tag? The docs show how to implement a responsive navbar http://twitter.github.com/bootstrap/components.html#navs – RRikesh Oct 26 '12 at 11:47
Sorry - I think I meant "fluid", not responsive. I actually don't want it to turn into that UI with the button on the right. I'll style it differently than the default TB look. How to get rid of rounded corners? Why do I get horizontal scroll bars? Why does it not span full width at small screens? – StackOverflowNewbie Oct 26 '12 at 11:54
How do you want the navbar to be exactly? links getting to the following lines? – RRikesh Oct 26 '12 at 12:16
I'm only concerned with the navbar's container. I want it to span the width of the screen always. – StackOverflowNewbie Oct 26 '12 at 12:17
you shouldn't be having a `.container` within a navbar. `.container` is for multiple rows, so you only really need it once right after the `body` tag or so. You should be using rows for other elements like navbar, header, body, etc. – ahnbizcad Oct 15 '14 at 23:27
Wow thank you so much. Exactly what I needed, and it seems so obvious now. – Logan Nov 26 '19 at 05:30

score 14 · Answer 4 · answered Oct 10 '14 at 15:16

I'm very late to the party but this answer pulls up top in Google search results.

Bootstrap 3 has an answer for this built in, set your container div in your navbar to container-fluid and it'll fall to screen width.

Like so:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>

score 2 · Answer 5 · answered Oct 14 '18 at 11:55

2

Put your <nav>element out from the <div class='container-fluid'>. Ex :-

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>

answered Oct 14 '18 at 11:55

Gayathra Nakandala

46
2

Ravi · Answer 6 · 2012-10-26T11:39:09.703

1

You need to push the container down the navbar.

Please find my working fiddle here http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>

edited Oct 26 '12 at 11:39

answered Oct 26 '12 at 11:28

Ravi

3,132
5
24
35

Same comment to rrikesh: It doesn't work well: 1.) still has rounded corners, 2.) horizontal scroll bar appears as I resize the browser, 3.) at small screen width, it no longer spans the full width of the browser. – StackOverflowNewbie Oct 26 '12 at 11:43
Try this fiddle this might solve your problem. http://jsfiddle.net/meetravi/aXCMW/2/ 1. Border radius problem is solved now 2. Try overflow:hidden 3. I am not sure my solution will solve it.so let me know the results. For minor bootstrap tweaks I use !important to override it. I am not sure is there any better way to override it. – Ravi Oct 26 '12 at 11:58
#3 is not solved. You can see it in the jsFiddle. Is there no "native" way to do this in TB? – StackOverflowNewbie Oct 26 '12 at 12:05
#3 issue is solved now. See the updated fiddle http://jsfiddle.net/meetravi/aXCMW/4/. Accept my ans if it solves your problem or +1 if it is of any little help to you. – Ravi Oct 26 '12 at 14:46

stack_overflower · Answer 7 · 2017-12-30T13:05:12.313

1

Just replace <div class="container"> with <div class="container-fluid">, which is the container with no margins on both sides.

I think this is the best solution because it avoids some useless overriding and makes use of built-in classes, it's clean.

edited Dec 30 '17 at 13:05

answered Mar 22 '17 at 08:50

stack_overflower

39
7

1

This doesn't fix it. It does expand further but not completely. – dogonaroof Mar 06 '19 at 06:47

score 0 · Answer 8 · answered Oct 26 '12 at 13:58

0

You can override some css

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

The !important is needed just in case you link the bootstrap.css after your custom css.

And add your nav html out of a .container

answered Oct 26 '12 at 13:58

silviomoreto

5,629
3
30
41

The `body` styles will affect the rest of the site, right? I just really want to affect just the navbar. I already like the padding/margins of everything else. – StackOverflowNewbie Oct 26 '12 at 22:52
yes, but you can make a way to do this.. everything else should be unser a `div.container`, right? So you can apply the `body` styles that you override in the `div.containe`, e.g.: `.container { padding-left: 10px !important; padding-right: 10px !important; }` – silviomoreto Oct 28 '12 at 19:02

score 0 · Answer 9 · answered Nov 14 '12 at 16:05

0

To remove the border-radius on the corners add this style to your custom.css file

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }

answered Nov 14 '12 at 16:05

Joseph N.

2,437
1
25
31

Eleanor Zimmermann · Answer 10 · 2014-01-07T22:02:29.690

0

I know I'm a bit late to the party, but I got around the issue by tweaking the CSS to have the width span 100%, and setting l/r margins to 0px;

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

edited Jan 07 '14 at 22:02

answered Jan 07 '14 at 21:56

Eleanor Zimmermann

414
1
8
26

score 0 · Answer 11 · answered Feb 14 '17 at 16:55

You have to add col-md-12 to your inner-navbar. md is for desktop .you can choose other options from bootstrap's list of options . 12 in col-md-12 is for full width .If you want half-width you can use 6 instead of 12 .for e.g. col-md-6.

Here is the solution to your question

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>

Twitter Bootstrap - full width navbar

11 Answers11

Linked