Bootstrap Navigation Bar

we will learn to create navigation bar. A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.

Navbar: Bootstrap provide various types of navigation bar:

  • Basic Navbar
  • Inverted Navbar
  • Coloured Navigation Bar
  • Right-Aligned Navbar
  • Fixed Navigation Bar
  • Drop-Down menu Navbar
  • Collapsible Navigation Bar

Example -

Inverted Navigation Bar

If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar:

Example -

Navigation Bar With Dropdown

Example -

Right-Aligned Navigation Bar

The .navbar-right class is used to right-align navigation bar buttons.

Example -

Navbar Buttons

To add buttons inside the navbar, add the .navbar-btn class on a Bootstrap button:

Example -

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.

Example -

Navbar Text

Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).

Example -

Fixed Navigation Bar

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

Example -

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.

In the following example the navigation bar is replaced by a button in the top right corner. Only when the button is clicked, the navigation bar will be displayed:

Example -