In a website, a common component is navigation bar and it used to navigate to the proper page according to its link, so in this tutorial, we are going to learn Bootstrap 3 Navigation Bar or navbar which is mobile responsive and have in 2 types of color,
Basic or default navbar
To make a basic or default nav take a tag nav and use the class name .navbar and .navbar-default to it and inside that take a div with the class name .container or .container-fluid and to make a navbar header take a div with the class name .navbar-header and inside that take an anchor tag with class name .navbar-brand and write some text now again inside container div write a unorder list and use the class name .navbar and .navbar-default and inside the ul write some li and you have developed a default navbar using bootstrap 3.
Example:
Inverse Navigation Bar
To make an inverse that is black navbar you have to use the class name .navbar-inverse in the position of navbar-default in tag nav
Example:
Dropdown in the navigation bar
In which li you want to make dropdown use class name .dropdown and in the anchor tag on click the dropdown will open, there use the class name .dropdown-toggle with data-toggle="dropdown" now inside the dropdown li create another unordered list and give the class name .dropdown-menu to the ul tag
Example:
Right align nav bar
you can use multiple ul inside a nav and give the class name .navbar-right to the ul which you want to align or pull-right.
Example:
Buttons in navbar
You want to use a button inside a nav then make a button inside the container with button class of bootstrap and use another class name .navbar-btn with the default classes to the button
Example:
Forms in navbar
as like button if you want to make or place a form inside the navbar then first create a form inside the navbar and give there a class name .navbar-form you can make it align left or right by using the class name .navbar-left or .navbar-right to the tag form.
Example:
Text on navbar
as a like button in navbar you can place text on bootstrap 3 navbar and to put that use the class name .navbar-text to a paragraph inside the navbar container.
Example:
The fixed top navbar
If you want to make a top fixed navbar then use the class name .navbar-fixed-top on the tag nav with the class name .nav
Example:
The fixed bottom nav bar
as like fixed-top nav you make button fixed nav also by placing the class name .navbar-fixed-bottom to the tag nav with the class name .nav
Example:
Collapsible nav bar
To make a collapsible nav first you have to create a default or inverse nav then keep the ul or unordered list portion in a div and give the class name .collapse and .navbar-collapse to it and give any unique id for the page and then inside the header of the navbar create another button on click the collapsible nav will open and use the class name .navbar-toggle and data-toggle="collapse" and data-target="#myNavbar" here myNavbar is the id of the ul containing div and inside the button, you can give some icons or text as below.
Example:
In this tutorial we have learned Bootstrap 3 Navigation Bar or navbar, Please provide your comment to make the site better and more useful.
Thanks for reading
