Navigation Bars
In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen size.
The <
nav class="navbar navbar-default"> class is used to create a standard navigation bar at the top of the page.
Let us see an example of Bootstrap Navigation Bars:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
Try Now
Bootstrap Inverted Navigation Bar
In bootstrap, Inverted navigation bar is used to create background black of the navigation . We have to change
.navbar-default class into
.navbar-inverse.
Let us see an example of Bootstrap Inverted Navigation Bars:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
Try Now
Navigation Bar With Dropdown
We can add dropdown menu with the navigation bars by using its class. The following example will help us how to implement it.
Let us see an example of Bootstrap Navigation Bar With Dropdown:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap</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="#">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>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Try Now
Bootstrap Right-Aligned Navigation Bar
We can align the navigation bar on the right side by using
.navbar-right class.
Let us see an example of Bootstrap Right-Aligned Navigation Bar:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">service</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<form class="navbar-form navbar-right">
<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>
Try Now