Bootstrap

Bootstrap Lesson 4: How to Create Responsive Navigation Bar in Bootstrap

In the previous bootstrap tutorial, we have given the introduction to Bootstrap. We learned how to add bootstrap in a project and we have also learned that how to create forms and layout with bootstrap. Now in this Bootstrap tutorial, we will learn to create responsive navigation bar in bootstrap.

Responsive Navigation Bar in Bootstrap:

Bootstrap Navbar:

The navigation bar is a header which is placed at the top of the page on our site. In other words, Navbar is a meta-components which are used as a navigation header. Navigation bar (header menu) automatically collapse on the mobile device and on the wider screen, the available viewport width increases.

The first thing we need to do is to set up the environment for the Navigation bar. We need to create simple HTML skeleton page and include Bootstrap CSS and JavaScript file and then include jQuery library into the project.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Navbar Tutorial</title>

<!-- Bootstrap CSS CDN -->

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-default"></nav>

<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<!-- Bootstrap Js CDN -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>       

Creating a Simple Navbar with Bootstrap:

We will use the bootstrap navbar component to create simple and responsive navigation header. In this tutorial, I will show you that how you can create navbar in the simplest way. So first we need to add <nav> element inside our <body> tag and that <nav> element would have two classes .navbar, .navbar-default now save your HTML file and open in your browser.

 

<nav class="navbar navbar-default"></nav>      

 

So when we include <nav> element into our site then a navigation bar will appear on the top of the site.

 

Responsive Navigation Bar in Bootstrap

 

Now let’s go ahead and see how we can create content for our site. So to do that we will add a <div> and add class “navbar-header” in that <div> and inside <div>, we will add the brand which is an anchor tag <a>. The brand could be anything like image text. We will add GeeksRead text as a brand. Here is code below:

 

<nav class="navbar navbar-default">

<div class="navbar-header">

<a href="#" class="navbar-brand">GeeksRead</a>

</div>

</nav>       

 

Now let see how our page would look like:

 

Bootstrap tutorial: Responsive Navigation Bar in Bootstrap

Now we have the navigation bar and a brand name which is text. Right, it does not have any link. Now we will see that how we can add other links like Home, About us, etc button. So we will create a <ul> element and add that class “nav navbar-nav” and inside it, we will add the list <li> for each item. Inside <li> element we will add an anchor tag <a>. here is demonstration below:

<ul class="nav navbar-nav">

<li><a href="#">HOME</a></li>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">CONTACT US</a></li>

</ul>       

Let see how our page would look like:

 

Now we have our brand name, Home button, about us button and Contact us button. If we want to add login and sign up button too on the right side of our HTML page then we will add another <ul> element and align that element on the right side. Here is the demonstration below:

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Sign Up</a></li>

<li><a href="#">Login</a></li>

</ul> 

You can notice that we have used class navbar-right to align the sign-up and login links on the right side of the header. This is how our site would look like:

using navbar-right to align

You can notice that our content stretch to the right edge, now if we want some space on both right and left side then we use container and put the content inside container class. Here is the complete code for our site now let see how our site would look like:

 

This is our basic navbar, and you can notice that this navbar is not responsive, it will not automatically collapse according to screen size. Now let see that how we can create Bootstrap Hamburger Menu.

So the first thing we need to do create a <div> tag with class collapse navbar-collapse and whatever we put inside of this <div>, it will be collapse when we hit mobile size.

So here is our HTML page:

Bootstrap responsive navigation bar

You can notice that when we have our side open on wider screen then our menu is visible. While on the mobile view screen or on a small screen our menu is not visible and our hamburger menu does not appear. Now let see how we can add hamburger menu to our site. So we need to add the following button tag just before anchor tag <a>.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>       

 

Inside of <button> tag, we have three <span> tag and each tag is responsible for making one of hamburger menu button bar. This button is not the image but HTML. Let see how our HTML page would look like:

 

icon-bar class in bootstrap

So we add this button tag before anchor tag inside <div> then it will add a hamburger menu button which will only appear when we resize our HTML page. Here is the complete code of our HTML page.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Navbar Tutorial</title>

<!-- Bootstrap CSS CDN -->

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

</head>

<body>

<nav class="navbar navbar-default">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a href="#" class="navbar-brand">GeeksRead</a>

</div>

<div class="collapse navbar-collapse" id="bs-nav-demo">

<ul class="nav navbar-nav">

<li><a href="#">HOME</a></li>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">CONTACT US</a></li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Sign Up</a></li>

<li><a href="#">Login</a></li>

</ul>

</div>

</div>

</nav>

<!-- jQuery CDN -->

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<!-- Bootstrap Js CDN -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>       

 

Conclusion:

In this Bootstrap tutorial, We have seen Responsive Navigation Bar in Bootstrap and learned that how Responsive Navigation Bar in Bootstrap works. We have learned about different classes of the Responsive Navigation Bar in Bootstrap and discussed the function of each class. We have also seen that how we can include hamburger menu button on our page.

1 Comment

Most Popular

To Top