×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Jumbotron [ A Big Highlighted Container ] Dropdown NavBar creation Using CSS & Bootstrap
Bootstrap Navbar or Navigation Bar or Menubar I - Bootstrap 3
1616    Arnab De    17/05/2017   

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
softetechnologies

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

softetechnologies

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.

softetechnologies

<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

Bootstrap Jumbotron [ A Big Highlighted Container ] Dropdown NavBar creation Using CSS & Bootstrap
softetechnologies
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.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
It is no easy task to lead men. But it is easy enough to drive them.
Rabindranath Tagore
469
23.83
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     30778
28/06/2017     25550
02/08/2017     22003
26/05/2018     19717
15/05/2017     19354
06/07/2017     17901
21/04/2018     16863
01/08/2017     16539
01/07/2017     14552
25/04/2018     13617
softetechnologies