title: Modify twitter bootstrap navbar
body: <p>Ive been trying to modify the twitter bootstrap navbar, at the moment all the links are aligned to the left, when what i would really like is the have them central.</p>
  
  <p>In a different post i read that you use this</p>
  
  <pre><code>.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 100px;
  }
  </code></pre>
  
  <p>But this did not work for me</p>
  
  <p>What do i need to change in the css to make this happen, i understand i put the modified css in the bootstrap and overrides.</p>
  
  <p>Any help appreciated</p>
  
  <p>this is my markup</p>
  
  <p>layouts/application</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/a&gt;
  
      &lt;a class="brand"&gt;Newbridges&lt;/a&gt;  
  
    &lt;% if user_signed_in? %&gt;
      &lt;div class="nav-collapse"&gt;
        &lt;ul class="nav "&gt;
        &lt;%= render "shared/navbarlogin" %&gt;
      &lt;/div&gt;
  
      &lt;% else%&gt;
      &lt;div class="nav-collapse"&gt;
        &lt;ul class="nav"&gt;
  
        &lt;%= render "shared/navbar" %&gt;
      &lt;/div&gt;
      &lt;% end %&gt;
  </code></pre>
  
  <p>I've also tried this</p>
  
  <pre><code>.nav &gt; li {
    float: none;
    display: inline-block;
    *display: inline;
    /* ie7 fix */
    zoom: 1;
    /* hasLayout ie7 trigger */
  }
  .nav {
    text-align: center;
  }
  </code></pre>