Bootstrap Navbar
Bootstrap Navbar or Menubar is the most important part of any website. Bootstrap Navbar is providing a framework of basic navbar with variety of options. But only two looks or themes are support in Bootstrap Navbar. We can attach lot of extra controls (like button, search box, icon) in this navbar.
To create a Navbar in bootstrap we have to use the class name .navbar along with the following classes to set the look of the menubar.
- .navbar-default : Create a smoke white color menu bar.
- .navbar-inverse : Create a black color menubar
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Course 1 </a> </li>
<li> <a href="#"> Course 2 </a> </li>
<li> <a href="#"> Course 3 </a> </li>
</ul>
</div>
</nav>
Note 1: .activeclass highlight a specific menu item.
Note 2: .container-fluid class provides a full width container in bootstrap. It covers the full width of any device.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Course 1 </a> </li>
<li> <a href="#"> Course 2 </a> </li>
<li> <a href="#"> Course 3 </a> </li>
</ul>
</div>
</nav>
Bootstrap Navbar Brand Name or Logo
We can set the brand name of the site using the class name .navbar-brand. Brand name are placed at the left corner of the Navbar.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Tutorial At Home </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Course 1</a> </li>
<li> <a href="#"> Course 2</a> </li>
<li> <a href="#"> Course 3</a> </li>
</ul>
</div>
</nav>
We can also place a brand logo at the left side of the Navbar. Just include a logo image with <img> tag.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="tah-logo-dark.jpg"></a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Course 1</a> </li>
<li> <a href="#"> Course 2</a> </li>
<li> <a href="#"> Course 3</a> </li>
</ul>
</div>
</nav>
Note : Using the <img> tag, we can easily replace the brand name with brand logo. Use 70 x 20 pixel logo use in default bootstrap navbar. width of the Bottstrap navbar is fixed. We can alter it by changing the css class. We discuss it customizing section of Bootstrap.
Alignment of the Menu Item
Menu item can placed at the right side of the Navbar using .navbar-right class.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> Tutorial At Home </a>
</div>
<ul class="nav navbar-nav">
<li class="active"> <a href="#"> Home </a> </li>
<li> <a href="#"> Course 1</a> </li>
<li> <a href="#"> Course 2</a> </li>
<li> <a href="#"> Course 3</a> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#"> Sign in</a> </li>
</ul>
</div>
</nav>
Place icon with menu item
We can place menu icon with each every menu item. But here we demonstrate only one icon from glyphicon( By default in Bootstrap ). We can also use Font Awesome Icon. How to use: Tutorial on Font Awesome Icon.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="tah-logo-dark.png"></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Course 1</a></li>
<li><a href="#"> Course 2 </a></li>
<li><a href="#"> Course 3 </a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#"><span class="glyphicon glyphicon-user"> Signin</a> </li>
</ul>
</div>
</nav>
Navbar Buttons
We use .navbar-btn to put a button as a menu item in Navbar.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="tah-logo-dark.png"></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Course 1</a></li>
<li><a href="#"> Course 2</a></li>
<li><a href="#"> Course 3</a></li>
<ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#"><span class="glyphicon glyphicon-user"> Signin</a> </li>
</ul>
<button class="btn btn-info navbar-btn">Buy Now</button>
</div>
</nav>
Navbar Form
We can placed a form in the Navbar along with icon
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="tah-logo-dark.png"></a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Course 1</a></li>
<li><a href="#"> Course 2</a></li>
<li><a href="#"> Course 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#"><span class="glyphicon glyphicon-user"> Signin</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"><span class="glyphicon glyphicon-search"></span>Search</button>
</form>
</div>
</nav>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Tutorial At Home</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Course 1</a></li>
<li><a href="#"> Course 2</a></li>
<li><a href="#"> Course 3</a></li>
</ul><form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
</nav>
Video Tutorials
