Bootstrap Navbar
A navigation bar or navbar is one of the most important part of any website. It is placed at the top of a website.
A default navbar can be created using by adding .navbar, .navbar-default classes into the <nav> tag.
There are some other classes which have to use for a navbar in bootstrap. Such as .navbar-header class into the <div> tag and .navbar-brand class into the <a> tag.
Here is an example of default navbar using bootstrap:
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> First page </a> </li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </a> </li>
</ul>
</div>
</nav>
Run Example
Bootstrap Inverted Navbar
Bootstrap allows .navbar-inverse class to create a black navbar. It is a alternative of default navbar. To use this you can put .navbar-inverse class instead of .navbar-default class.
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> First page </a> </li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </a> </li>
</ul>
</div>
</nav>
Run Example
Bootstrap Navbar with Dropdown
You can use dropdown in navigation bar using bootstrap classes. Here is an example of using dropdown:
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> First page </a>
<ul class="dropdown-menu">
<li> <a href="#"> dropdown 1 </a> </li>
<li> <a href="#"> dropdown 2 </a> </li>
<li> <a href="#"> dropdown 3 </a> </li>
</ul>
</li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </a> </li>
</ul>
</div>
</nav>
Run Example
Bootstrap Right Aligned Navbar
If you want right aligned navigation bar button then you can use .navbar-right class.
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> First page </a> </li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#"> Right menu 1 </a> </li>
<li> <a href="#"> Right menu 2 </a> </li>
</ul>
</div>
</nav>
Run Example
Bootstrap Navbar Button
To add a button in the navbar you have to use .navbar-btn class.
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> First page </a> </li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </a> </li>
</ul>
<button class="btn btn-primary navbar-btn"> Button </button>
</div>
</nav>
Run Example
Bootstrap Navbar Forms
To add forms in the navbar you can use .navbar-form class into the <form> tag. You have also use .form-group class into a <div> tag, which contains the <input> tag.
Example:
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Name of the Website </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> First page </a> </li>
<li> <a href="#"> Second page </a> </li>
<li> <a href="#"> Third page </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-primary"> Submit </button>
</form>
</div>
</nav>
Run Example
Bootstrap Navbar Text
To write text in the navbar, that are not links you have to use .navbar-text class. You must ensure proper padding and color of the text.
Example:
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Page 1 </a> </li>
</ul>
<p class="navbar-text"> Text </p>
</nav>
Run Example
Bootstrap Fixed Navbar
To fix the navbar in the top you can use .navbar-fixed-top class.
Example:
<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>
</nav>
Run Example