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:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
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:
<nav class="navbar navbar-inverse">
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:
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li>
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:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
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:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
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:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="navbar-form navbar-right" action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
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:
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
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:
<nav class="navbar navbar-inverse navbar-fixed-top">
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:
<nav class="navbar navbar-inverse navbar-fixed-bottom">
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:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
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