Difference between revisions of "Bootstrap navigation bar"

Revision as of 08:23, 10 May 2016

In Bootstrap (framework), the navigation bar provides a responsive navigational menu.

Navigation bar and hamburger menu

On wider screens, the navigation bar displays at full width.

On narrow screen (mobile phones), the hamburger menu displays instead.

Requires Bootstrap CSS

Using the Bootstrap navigation bar requires both Bootstrap CSS.

Example

Here is the HTML for a pills-style navigation bar:

<nav>
 <ul class="nav nav-pills pull-right">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">About</a></li>
  <li role="presentation"><a href="#">Contact</a></li>
 </ul>
</nav>

Source: http://getbootstrap.com/examples/jumbotron-narrow/

See also

• Bootstrap (framework)
• Navigation bar

External links

General

• Starter template @ getbootstrap.com
• Navbar component @ getbootstrap.com
• Bootstrap navbar generator @ smarchal.com
• Change navbar color in Twitter Bootstrap 3 @ stackoverflow

code.karljones.com

• Bootstrap examples