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: