Bootstrap Navbar or Navigation Bar or Menubar I
17-05-2017    371 times
Bootstrap Navbar

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
Tutorial at home

<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>

Simple NavBar
Simple NavBar

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>

Inverse NavBar
Inverse NavBar

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>

Brand Name
Brand Name

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>

Navbar With Brand Logo
Navbar With Brand Logo

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.

Tutorial at home

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>

Right Align Menu Item
Right Align Menu Item

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>

Right Align Nav with icon
Right Align Nav with icon

Navbar Buttons

We use .navbar-btn to put a button as a menu item in Navbar.

Tutorial at home
Tutorial at home

<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>

Nav Bar with Button
Nav Bar with Button

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>

Form In Navbar
Form In Navbar

<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>

Form In Navbar with Group Button
Form In Navbar with Group Button

Video Tutorials

freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post