The navbar class is used to create a simple navigation bar by including .navbar and .navbar-default in the navigation tab:

<nav class="navbar navbar-default" role="navigation">

To make a scalable, responsive menu bar that collapses to a dropdown when displaying on mobile devices, use the following class to wrap the bar:

<div class="navbar-header">

You can also put forms within a navigation bar by adding the .navbar-form class:

<form class="navbar-form navbar-left" role="search">

Similar to the navbar class, .navbar-btn adds a button to the bar that can perform many useful functions:

<button type="button" class="btn btn-default navbar-btn"> … </button>

By adding the .navbar-text class, we can also add text to the navigation bar:

<p class="navbar-text"> … </p>

The navbar-link class allows us to add standard links that are not in the navbar navigation component:

<p class="navbar-text navbar-right">
  <a href="#" class="navbar-link"></a>
</p>

Adding the navbar-fixed-top class within the <nav> tabs allows navbar to dynamically position itself at the top of the page. Here is its syntax:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

The navbar-fixed-bottom class allows the navigation bar to sit right at the bottom of the page. Here is its syntax:

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

The navbar-static-top class adds a new feature to the navigation bar that allows the element to scroll along with the page. Here is its syntax:

<nav class="navbar navbar-default navbar-static-top" role="navigation">

The navbar-inverse class only changes the color of the navigation bar and turns it into the opposite color. For example, navbar gets a black background with white text:

<nav class="navbar navbar-inverse" role="navigation">