Bootstrap For Beginners: Navigation Bar - Part Eleven

Shaili Dashora
8y
25.3k
0
5

Article

I have started an article series on Bootstrap and published ten articles so far. Read the previous ten parts here,

Introduction

In this article we will learn about Bootstrap Navigation Bar,we will create different type of navbars by using Bootstrap classes and will also create responsive navbar with different styles.

Bootstrap Navigation Bars

The Bootstrap navbar component is used to create responsive navigation header for our website or application. A navigation bar can collapse or extend, according to the screen size of different devices.

Default Navigation Bar (navbar)

For creating default navbar we need to use <nav class="navbar navbar-default"> and we can add responsive Default Navigation Bar

to the top of the page in any web application.

Example 1: Creating Default Navbar

Step 1: In this example we will create default navbar. For this first we will create basic Bootstrap HTML page by using the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Step 2: Now to create default navbar,

In the <body> of the HTML page we will add <nav> tag with classes .navbar, .navbar-default.

Inside this we will add <div> with class .container-fluid.

In this we will add one <div> with header class .navbar-header, now we will add <a> element with class navbar-brand. By using this text becomes slightly larger in size.

Now for adding links to the navbar we will add unordered list (ul) with the classes .nav, .navbar-nav and provide menu links using <li> element.

Let's create default navbar by using the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Default Navigation Bar (navbar)

Inverted Navigation Bar

To create an inverted navbar with black background and white text we need to add .navbar-inverse class with the .navbar class to the <nav> tag.

Example 2: Creating Inverted Navigation Bar

In this example we will create navbar same like Example1. Now we need to just change the .navbar-default class into .navbar-inverse for creating Inverted Navigation Bar.

Let us create Inverted Navigation Bar by using the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Inverted Navigation Bar

Fixed (Top or Bottom) Navigation Bar

The navigation bar can be fixed at the top or at the bottom of the page. When we scroll the page it is visible in a fixed position (Top or Bottom).

To Fixed Navigation Bar at the Top, we need to use .navbar-fixed-top class to the <nav> tag.
To Fixed Navigation Bar at the Bottom, we need to use .navbar-fixed-bottom class to the <nav> tag.

Example 3: Fixed Top Navigation Bar

In this example we will create inverted navbar same as Example2. In this we will also add .navbar-fixed-top class, to the <nav> tag for fixing the navbar to the top of the page and we will write some contents in the document, so we can easily see fixed top effect of the navbar when we scroll the page,by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Fixed Top Navbar</h3>
<div class="row">
<div class="col-md-6">
<p>
<b>Paragraph1:</b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas
porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,
purus lectus malesuada libero,sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque
</p>
</div>
<div class="col-md-6">
<p>
<b>Paragraph2:</b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas
porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,
purus lectus malesuada libero,sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque
</p>
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Fixed Top Navigation Bar

Example 4: Fixed Bottom Navigation Bar

In this example we will create inverted navbar same like Example2. In this we will also add .navbar-fixed-bottom class to the <nav> tag for fixing the navbar to the bottom of the page and we will write some contents in the document, so we can easily see fixed Bottom effect of the navbar when we scroll the page,by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Fixed Bottom Navbar</h3>
<div class="row">
<div class="col-md-4">
<p>
<b>Paragraph1:</b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas
porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,
purus lectus malesuada libero,sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque
</p>
</div>
<div class="col-md-4">
<p>
<b>Paragraph2:</b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas
porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,
purus lectus malesuada libero,sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque
</p>
</div>
<div class="col-md-4">
<p>
<b>Paragraph3:</b>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas
porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,
purus lectus malesuada libero,sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque
</p>
</div>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Fixed Bottom Navbar

Navigation Bar With Dropdown and Right-Aligned Menu

We can create Dropdown Menus in Navigation bar. We can also add right-align navigation bar menus. For this we need to use navbar-right class.

Example 5: Navigation Bar With Dropdown and Right-Aligned Menu

Step 1: In this example we will create a Inverted Navigation bar same like Example2 with options Home, AboutUs, Technology and

ContactUs by writing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Step 2: Now we will add Dropdown Menu for the "Technology" button.

In this we will first add class="dropdown" to the <li> element of Technology button.

Now we will add class="dropdown-toggle" to the <a> element of Technology button link and we will also add one more property data-toggle="dropdown" by which we set this attribute to the "dropdown".

In this for <a> element of Technology link we want to add arrow sign for showing that some more dropdown menus are here. For this we will add <span> with class caret for arrow sign.

Now we will add dropdown menu for the Technology button so inside the <li> element we will add <ul> element with class dropdown-menu and inside this we will provide some submenu links with <li> element.

Let us create Navigation Bar with Dropdown by writing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Technology
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">.NET</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Navbar With Dropdown

Step 3:Navigation Bar with Right-Aligned Menu

In this up to now we will create Navigation Bar With Dropdown and now we will add Right-Aligned Menu links. In the Navigation Bar, we need to use .navbar-right class to the <ul> element.
For this in the above code we will add <ul> element with class="nav navbar-nav navbar-right" inside this. We will add "Login" and "RegisterProfile" links that will be to the right side of the Navigation Bar.

Let's create Navigation Bar with Right-Aligned Menu by writing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Technology
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">.NET</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">ASP.NET MVC</a></li>
<li><a href="#">Java</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li><a href="#">Register Profile</a></li>
</ul>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Navbar with Right-Aligned Menu

Navigation Bar with Toggle Button

We know that using Bootstrap we make responsive navigation bar,it is expand and collapse according to different devices screen size,now we want to hide navigation bar, and only show it when it is needed.so the navigation bar is replaced by a button which is placed in the top right corner,and when we click on button the navigation bar will be display.

Example 6: Navigation Bar with Toggle Button

In this example we will create default navbar with toggle button and then we will apply some styles on navigation bar and toggle button so we will collapse and expand the navbar on small screen.

Step 1:First we will create default fixed top navbar by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

Step 2:Add Toggle Button in Navbar

Now in the above code at the <div> of right navbar menu we will add class="collapse navbar-collapse" by which we will collapse the navbar, and also add id="MainNavBar" this id we can give whatever we want.
Now in the Navbar Header we will add <button> with class navbar-toggle so we can toggle the navbar from this button, we also add some attributes data-toggle="collapse" by which we can collapse the navbar, we will add data-target="#MainNavBar" here we provide <div> id(MainNavBar) with # sign for which data this button perform collapsing fuctionality.
Now we want to add three horizontal line in the button as a text button show like three line icon,for this we will use <span> with class="icon-bar" three times.
When we see in small screen the toggle button shows at the top right corner only when we click on button the navbar shows othervise it will be hide so the button look like on/off its show toggling behavior for navbar.

Let's create navbar with toggle button by writing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">C-sharp Corner</a>
</div>
<div class="collapse navbar-collapse" id="MainNavBar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Navbar with Toggle Button

Step 3 : Now we want to interactively look for this navbar so we will add some styles on navbar and toggle button. First we will provide id="RedMenu" for <nav> tag, whatever we want we can give id, now we add following styles for navbar in <style> tag in the <head> part of the document.

<style>
#RedMenu {
background-color: #B00;
border-color: #B00;
}
#RedMenu ul li a {
color: #ffffff;
}
#RedMenu ul li:hover {
background-color: #000;
}
</style>

Now we will add style on the button,

style="background-color:#000"

We will add style on <span> tag.

style="background-color:#ffffff"

we will add style on <a> tag of <div class="navbar-header">.

style="color: #ffffff"

Let's see how navbar look like after adding styles on it by writing the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part11</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
#RedMenu {
background-color: #B00;
border-color: #B00;
}
#RedMenu ul li a {
color: #ffffff;
}
#RedMenu ul li:hover {
background-color: #000;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="RedMenu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar"
style="background-color:#000">
<span class="icon-bar" style="background-color:#ffffff"></span>
<span class="icon-bar" style="background-color:#ffffff"></span>
<span class="icon-bar" style="background-color:#ffffff"></span>
</button>
<a class="navbar-brand" style="color: #ffffff" href="#">C-sharp Corner</a>
</div>
<div class="collapse navbar-collapse" id="MainNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>