Introducing Navbar in Bootstrap - Part 1

In this post we are going to learn about navbar feature in Bootstrap. Navbar is one of the prominent features of Bootstrap sites. Navbars collapses on the mobile views and become horizontal as the width of the browser increases. Navbars are responsive meta components that serve as a navigation headers for your application.


You have three options when placing the navbar on your page. The first option is to have it appear at the top of the page as a normal element. This can be achieved by adding the navbar-static-top class. The second option is to affix it to the top of the page that means it will not disappear when the user scrolls. This can be achieved by adding navbar-fixed-top class. The third and final option you can have the navbar use the same behavior at the bottom of the page using class navbar-fixed-bottom.

To start creating your own navbar add an HTML nav element to your page and add the navbar class to it. To create a simple navbar, you need two main classes .navbar and .navbar-default. A simple default example is

//The class navbar is going to enable the navbar and navbar-default is going to give us the default color scheme
<nav class="navbar navbar-default">
     //Here the navbar-header is going to be the container of brand, say the name of your organisation
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Coding Defined</a>
  </div>
  <div>
        //An un-ordered list having classes nav and navbar-nav for enabling navbar.
<ul class="nav navbar-nav">
             //A link having class active, that means this is the page the user is currently on. Unfortunately bootstrap cannot detect automatically the page the user's currently on.
    <li class="active"><a href="#">1st Tab</a></li>
            //A normal Link
    <li><a href="#">2nd Tab</a></li>
              //Creating a dropdown using a class dropdown
    <li class="dropdown">
                //The next line will act as a dropdown with class dropdown-toggle to toggle it.
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
           3rd Tab With Dropdown<span class="caret"></span>
        </a>
                //The content inside the dropdown.
<ul class="dropdown-menu">
          <li><a href="#">1st Sub Tab</a></li>
  <li><a href="#">2nd Sub Tab</a></li>
  <li><a href="#">3rd Sub Tab</a></li>
          <li><a href="#">4th Sub Tab</a></li>
       </ul>
     </li>
    </ul>
  </div>
</nav>

Result :

The above example is the default navbar example which will work only in large screens. Now to make the above navbar as responsive we need to add few more lines of code to the above example.

At first we will add a button with class navbar-toggle inside the navbar-header div.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand" href="#">Coding Defined</a>
</div>

Then we will add an Id and a class to the div which contains an unordered list with class nav and navbar-nav like below

<div class="collapse navbar-collapse" id="bs-example">
        ....
</div>

After changing accordingly we will get an output for mobile devices as

In our next post we will go through some of the other examples of navbar. Please Like and Share the Blog, if you find it interesting and helpful.

Related articles

• Controlling Visibility in BootStrap 
• Getting Started with BootStrap 
• Little about BootStrap Classes 
• Introducing BootStrap Grid System
• Get and Set Property in TypeScript 
• Basic Introduction to AngularJS 
• Blast.js - Blast Text Apart to Make it Manipulable 
• New Features in C# 6.0 - Part 1
• Print Screen in Asp Net Web Application 
• Control Content Placement in Bootstrap