CODEWITHSUNDEEP
htmltwitter-bootstraptwitter-bootstrap-3
Willem-Aart
Willem-Aart

Reputation: 2440

Correct way of adding a button to a navbar in Bootstrap 3

What's the correct way to add a button to the right of a navbar in Bootstrap 3?

This is one method:

<ul class="nav navbar-nav navbar-right">
  <li>
    <button type="button" class="btn btn-primary navbar-btn">
      <span class="glyphicon glyphicon-plus"></span> 
      Activiteit toevoegen
    </button>
  </li>
</ul>

This is another method:

<div class="nav navbar-nav navbar-right">
  <button type="button" class="btn btn-primary navbar-btn">
    <span class="glyphicon glyphicon-plus"></span> 
    Activiteit toevoegen
  </button>
  </li>
</div>

Since I'm adding a single button, I'd guess that I won't need to use an unordered list?

Is there a better/more correct way?

Update:

Also, with the following code, when the menu is collapsed, the button is placed directly at the edge of the browser window, unlike the other menu items:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toon/verberg navigatie</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="images/logo.jpg" alt="Brandhof Bijzonder Bouwen">
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Weekplanning</a></li>
        <li><a href="#">Voorgaande weken</a></li>
        <li><a href="#">Uitloggen</a></li>
      </ul>
      <div class="nav navbar-nav navbar-right">
        <button type="button" class="btn btn-primary navbar-btn">
          <span class="glyphicon glyphicon-plus"></span>
          Activiteit toevoegen
        </button>
      </div>
    </div>
  </div>
</nav>

Screenshot:

screenshot

Edit: Hmm, it seems to work correctly when I leave out 'navbar-nav'. Any disadvantages with this approach?

Upvotes: 2

Views: 10419

Answers (1)

KyleMit
KyleMit

Reputation: 29937

The correct way to add a button to your navbar is just to add the class .navbar-btn

Keep in mind, HTML is meant to be a semantic representation of your content. If you have only a single item, I would not create an unordered list of items. Then you can display it however you want.

In this case, I would leave out the ul.

Here's a complete navbar:

<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="http://i.imgur.com/GAQSCtB.png" width="25" />
        </a>
        <div class="nav pull-right">
          <button type="button" class="btn btn-primary navbar-btn">
            <span class="glyphicon glyphicon-plus"></span> 
            Activiteit toevoegen
          </button>
        </div>
    </div>
</div>

Here's a Working Demo in Fiddle

screenshot

Update:

If you want to style the button when the menu is collapsed, you can use media queries to change the the style on small screens:

@media (max-width: 768px) { 
    .navbar-btn {
        margin-left: 15px;
    }
}

Demo in fiddle

Upvotes: 3

Related Questions