Twitter Bootstrap: What is the correct way to use the `.btn` class within a navbar?

by

The navbar accommodates buttons without a problem – I have buttons in the navbar without any problems, and I was able to add them to the static navbar example on the Bootstrap page:

Buttons added to the navbar.

The html should be laid out like this:

<div class="navbar navbar-fixed-top active">
  <div class="navbar-inner">
    <div class="container" style="width: auto;">
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse">
        <ul class="nav">
          ... nav links ...
        </ul>
        <form class="navbar-search pull-left" action="">
          ... search box stuff
        </form>
        <a class="btn btn-success">Sign in</a>
        <a class="btn btn-primary">Sign up</a>
      </div>
    </div>
  </div>
</div>

If you’re not using the responsive layout to collapse the navbar on smaller screens, just put your button links one level up, in <div class="container">.

If you’re still not finding the problem, try using Chrome’s Dev Tools to see what CSS is being applied to the buttons that shouldn’t be.

Leave a Comment