Bootstrap For Beginners: Navigation Bar - Part Eleven

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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.      
  12.     <script src="js/jquery-2.1.4.min.js"></script>  
  13.     <script src="js/bootstrap.min.js"></script>  
  14. </body>  
  15. </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:
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Default Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-default-->  
  13.     <nav class="navbar navbar-default">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <li><a href="#">Technology</a></li>  
  25.                 <li><a href="#">Contact Us</a></li>  
  26.             </ul>  
  27.             <!--Menu End Here-->  
  28.         </div>  
  29.     </nav>  
  30.     <!--<nav> tag end-->  
  31.     <!--Default Navbar End Here-->  
  32.     <script src="js/jquery-2.1.4.min.js"></script>  
  33.     <script src="js/bootstrap.min.js"></script>  
  34. </body>  
  35. </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: 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse -->  
  13.     <nav class="navbar navbar-inverse">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <li><a href="#">Technology</a></li>  
  25.                 <li><a href="#">Contact Us</a></li>  
  26.             </ul>  
  27.             <!--Menu End Here-->  
  28.         </div>  
  29.     </nav>  
  30.     <!--<nav> tag end-->  
  31.     <!--Inverted Navbar End Here-->  
  32.     <script src="js/jquery-2.1.4.min.js"></script>  
  33.     <script src="js/bootstrap.min.js"></script>  
  34. </body>  
  35. </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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse and .navbar-fixed-top" -->  
  13.     <nav class="navbar navbar-inverse navbar-fixed-top">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <li><a href="#">Technology</a></li>  
  25.                 <li><a href="#">Contact Us</a></li>  
  26.             </ul>  
  27.             <!--Menu End Here-->  
  28.         </div>  
  29.     </nav>  
  30.     <!--<nav> tag end-->  
  31.     <!--Inverted Navbar End Here-->  
  32.     <!--Contents Start Here-->  
  33.     <div class="container">  
  34.         <h3>Fixed Top Navbar</h3>  
  35.         <div class="row">  
  36.             <div class="col-md-6">  
  37.                 <p>  
  38.                     <b>Paragraph1:</b>  
  39.                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas  
  40.                     porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,  
  41.                     purus lectus malesuada libero,sit amet commodo magna eros quis urna.  
  42.                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque  
  43.                 </p>  
  44.             </div>  
  45.             <div class="col-md-6">  
  46.                 <p>  
  47.                     <b>Paragraph2:</b>  
  48.                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas  
  49.                     porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,  
  50.                     purus lectus malesuada libero,sit amet commodo magna eros quis urna.  
  51.                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque  
  52.                 </p>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56.     <!--Contents End Here-->  
  57.     <script src="js/jquery-2.1.4.min.js"></script>  
  58.     <script src="js/bootstrap.min.js"></script>  
  59. </body>  
  60. </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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse and navbar-fixed-bottom -->  
  13.     <nav class="navbar navbar-inverse navbar-fixed-bottom">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <li><a href="#">Technology</a></li>  
  25.                 <li><a href="#">Contact Us</a></li>  
  26.             </ul>  
  27.             <!--Menu End Here-->  
  28.         </div>  
  29.     </nav>  
  30.     <!--<nav> tag end-->  
  31.     <!--Inverted Navbar End Here-->  
  32.     <!--Contents Start Here-->  
  33.     <div class="container">  
  34.         <h3>Fixed Bottom Navbar</h3>  
  35.         <div class="row">  
  36.             <div class="col-md-4">  
  37.                 <p>  
  38.                     <b>Paragraph1:</b>  
  39.                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas  
  40.                     porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,  
  41.                     purus lectus malesuada libero,sit amet commodo magna eros quis urna.  
  42.                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque  
  43.                 </p>  
  44.             </div>  
  45.             <div class="col-md-4">  
  46.                 <p>  
  47.                     <b>Paragraph2:</b>  
  48.                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas  
  49.                     porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,  
  50.                     purus lectus malesuada libero,sit amet commodo magna eros quis urna.  
  51.                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque  
  52.                 </p>  
  53.             </div>  
  54.             <div class="col-md-4">  
  55.                 <p>  
  56.                     <b>Paragraph3:</b>  
  57.                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Maecenas  
  58.                     porttitor congue massa.Fusce posuere, magna sed pulvinarultricies,  
  59.                     purus lectus malesuada libero,sit amet commodo magna eros quis urna.  
  60.                     Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.Pellentesque  
  61.                 </p>  
  62.             </div>  
  63.         </div>  
  64.     </div>  
  65.     <!--Contents End Here-->  
  66.     <script src="js/jquery-2.1.4.min.js"></script>  
  67.     <script src="js/bootstrap.min.js"></script>  
  68. </body>  
  69. </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: 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse -->  
  13.     <nav class="navbar navbar-inverse">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <li><a href="#">Technology</a></li>  
  25.                 <li><a href="#">Contact Us</a></li>  
  26.             </ul>  
  27.             <!--Menu End Here-->  
  28.         </div>  
  29.     </nav>  
  30.     <!--<nav> tag end-->  
  31.     <!--Inverted Navbar End Here-->  
  32.     <script src="js/jquery-2.1.4.min.js"></script>  
  33.     <script src="js/bootstrap.min.js"></script>  
  34. </body>  
  35. </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:
 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse -->  
  13.     <nav class="navbar navbar-inverse">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <!--dropdown Menu Start-->  
  25.                 <li class="dropdown">  
  26.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
  27.                         Technology  
  28.                         <span class="caret"></span>  
  29.                     </a>  
  30.                     <ul class="dropdown-menu">  
  31.                         <li><a href="#">.NET</a></li>  
  32.                         <li><a href="#">HTML5</a></li>  
  33.                         <li><a href="#">ASP.NET MVC</a></li>  
  34.                         <li><a href="#">Java</a></li>  
  35.                     </ul>  
  36.                 </li>  
  37.                 <!--dropdown Menu End-->  
  38.                 <li><a href="#">Contact Us</a></li>  
  39.             </ul>  
  40.             <!--Menu End Here-->  
  41.         </div>  
  42.     </nav>  
  43.     <!--<nav> tag end-->  
  44.     <!--Inverted Navbar End Here-->  
  45.     <script src="js/jquery-2.1.4.min.js"></script>  
  46.     <script src="js/bootstrap.min.js"></script>  
  47. </body>  
  48. </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: 
 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Inverted Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-inverse -->  
  13.     <nav class="navbar navbar-inverse">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <ul class="nav navbar-nav">  
  22.                 <li class="active"><a href="#">Home</a></li>  
  23.                 <li><a href="#">About Us</a></li>  
  24.                 <!--dropdown Menu Start-->  
  25.                 <li class="dropdown">  
  26.                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
  27.                         Technology  
  28.                         <span class="caret"></span>  
  29.                     </a>  
  30.                     <ul class="dropdown-menu">  
  31.                         <li><a href="#">.NET</a></li>  
  32.                         <li><a href="#">HTML5</a></li>  
  33.                         <li><a href="#">ASP.NET MVC</a></li>  
  34.                         <li><a href="#">Java</a></li>  
  35.                     </ul>  
  36.                 </li>  
  37.                 <!--dropdown Menu End-->  
  38.                 <li><a href="#">Contact Us</a></li>  
  39.             </ul>  
  40.             <!--Menu End Here-->  
  41.             <!--Right Aligned Menu Start-->  
  42.             <ul class="nav navbar-nav navbar-right">  
  43.                 <li><a href="#">Login</a></li>  
  44.                 <li><a href="#">Register Profile</a></li>  
  45.             </ul>  
  46.             <!--Right Aligned Menu End-->  
  47.         </div>  
  48.     </nav>  
  49.     <!--<nav> tag end-->  
  50.     <!--Inverted Navbar End Here-->  
  51.     <script src="js/jquery-2.1.4.min.js"></script>  
  52.     <script src="js/bootstrap.min.js"></script>  
  53. </body>  
  54. </html>  
Output: Navbar with Right-Aligned Menu
 
 
Navigation Bar with Toggle Button
 
We know that using Bootstrap we make responsive navigation bar, it expands and collapses according to different devices screen size, now we want to hide the 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 displayed.
 
Example 6: Navigation Bar with Toggle Button
 
In this example we will create a 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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Default Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->  
  13.     <nav class="navbar navbar-default navbar-fixed-top">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  18.             </div>  
  19.             <!--Navbar Header End Here-->  
  20.             <!--Menu Start Here-->  
  21.             <div>  
  22.                 <ul class="nav navbar-nav navbar-right">  
  23.                     <li class="active"><a href="#">Home</a></li>  
  24.                     <li><a href="#">About Us</a></li>  
  25.                     <li><a href="#">Technology</a></li>  
  26.                     <li><a href="#">Contact Us</a></li>  
  27.                 </ul>  
  28.             </div>  
  29.             <!--Menu End Here-->  
  30.         </div>  
  31.     </nav>  
  32.     <!--<nav> tag end-->  
  33.     <!--Default Navbar End Here-->  
  34.     <script src="js/jquery-2.1.4.min.js"></script>  
  35.     <script src="js/bootstrap.min.js"></script>  
  36. </body>  
  37. </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 performs collapsing functionality.
  • Now we want to add three horizontal lines in the button as a text button show like a 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 a button the navbar shows otherwise it will be hidden so the button looks like on/off its show toggling behavior for navbar.
Let's create navbar with toggle button by writing the following code: 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Default Navbar Start Here-->  
  12.     <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->  
  13.     <nav class="navbar navbar-default navbar-fixed-top">  
  14.         <div class="container-fluid">  
  15.             <!--Navbar Header Start Here-->  
  16.             <div class="navbar-header">  
  17.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar">  
  18.                     <span class="icon-bar"></span>  
  19.                     <span class="icon-bar"></span>  
  20.                     <span class="icon-bar"></span>  
  21.                 </button>  
  22.                 <a class="navbar-brand" href="#">C-sharp Corner</a>  
  23.             </div>  
  24.             <!--Navbar Header End Here-->  
  25.             <!--Menu Start Here-->  
  26.             <div class="collapse navbar-collapse" id="MainNavBar">  
  27.                 <ul class="nav navbar-nav navbar-right">  
  28.                     <li class="active"><a href="#">Home</a></li>  
  29.                     <li><a href="#">About Us</a></li>  
  30.                     <li><a href="#">Technology</a></li>  
  31.                     <li><a href="#">Contact Us</a></li>  
  32.                 </ul>  
  33.             </div>  
  34.             <!--Menu End Here-->  
  35.         </div>  
  36.     </nav>  
  37.     <!--<nav> tag end-->  
  38.     <!--Default Navbar End Here-->  
  39.     <script src="js/jquery-2.1.4.min.js"></script>  
  40.     <script src="js/bootstrap.min.js"></script>  
  41. </body>  
  42. </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.
  1. <style>  
  2.            #RedMenu {  
  3.               background-color#B00;  
  4.               border-color#B00;  
  5.            }  
  6.   
  7.            #RedMenu ul li a {  
  8.                color#ffffff;  
  9.            }  
  10.   
  11.            #RedMenu ul li:hover {  
  12.                background-color#000;  
  13.            }  
  14. </style>  
Now we will add style on the button,
  1. style="background-color:#000"  
We will add style on <span> tag. 
  1. style="background-color:#ffffff"  
we will add style on <a> tag of <div class="navbar-header">. 
  1. style="color: #ffffff"  
Let's see how navbar look like after adding styles on it by writing the following code:  
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part11</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9.     <style>  
  10.         #RedMenu {  
  11.             background-color: #B00;  
  12.             border-color: #B00;  
  13.         }  
  14.  
  15.             #RedMenu ul li a {  
  16.                 color: #ffffff;  
  17.             }  
  18.  
  19.             #RedMenu ul li:hover {  
  20.                 background-color: #000;  
  21.             }  
  22.     </style>  
  23. </head>  
  24. <body>  
  25.     <!--Default Navbar Start Here-->  
  26.     <!--<nav> tag  start with classes .navbar and .navbar-default and .navbar-fixed-top-->  
  27.     <nav class="navbar navbar-default navbar-fixed-top" id="RedMenu">  
  28.         <div class="container-fluid">  
  29.             <!--Navbar Header Start Here-->  
  30.             <div class="navbar-header">  
  31.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MainNavBar"   
  32.                    style="background-color:#000">  
  33.                     <span class="icon-bar" style="background-color:#ffffff"></span>  
  34.                     <span class="icon-bar" style="background-color:#ffffff"></span>  
  35.                     <span class="icon-bar" style="background-color:#ffffff"></span>  
  36.                 </button>  
  37.                 <a class="navbar-brand" style="color: #ffffff" href="#">C-sharp Corner</a>  
  38.             </div>  
  39.             <!--Navbar Header End Here-->  
  40.             <!--Menu Start Here-->  
  41.             <div class="collapse navbar-collapse" id="MainNavBar">  
  42.                 <ul class="nav navbar-nav navbar-right">  
  43.                     <li><a href="#">Home</a></li>  
  44.                     <li><a href="#">About Us</a></li>  
  45.                     <li><a href="#">Technology</a></li>  
  46.                     <li><a href="#">Contact Us</a></li>  
  47.                 </ul>  
  48.             </div>  
  49.             <!--Menu End Here-->  
  50.         </div>  
  51.     </nav>  
  52.     <!--<nav> tag end-->  
  53.     <!--Default Navbar End Here-->  
  54.     <script src="js/jquery-2.1.4.min.js"></script>  
  55.     <script src="js/bootstrap.min.js"></script>  
  56. </body>  
  57. </html>  
Output
 
 
In this article we focused on Bootstrap Navigation Bars.Then in next articles we will understand all the components of Bootstrap step by step.


Similar Articles