Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with
<nav class="navbar navbar-default">
The following example shows how to add a navigation bar to the top of the page

Inverted Navigation Bar

If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar
Just change the .navbar-default class into .navbar-inverse

Navbar Forms

To add form elements inside the navbar, add the .navbar-form class to a form element and add an input(s). Note that we have added a .form-group class to the div container holding the input. This adds proper padding if you have more than one inputs

Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.

Collapsing The Navigation Bar

The navigation bar often takes up too much space on a small screen.
We should hide the navigation bar; and only show it when it is needed.