Post
Ask Question

Bootstrap Navigation Bar With Toggle Button

Navigation Bar are mainly used to provide direction to the users/visitors. To create a Bootstrap Navigation Bar with a Toggle button is very simple and easy.
Step 1
  1. <ul>  
  2.     <li>  
  3.         <a href="http://www.yoursitename.com/Home">Home</a>  
  4.     </li>  
  5.     <li>  
  6.         <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  7.     </li>  
  8.     <li>  
  9.         <a href="http://www.yoursitename.com/Books">Books</a>  
  10.     </li>  
  11.     <li>  
  12.         <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  13.     </li>  
  14. </ul>   
Output

 
Step 2
  1. <ul class="nav navbar-nav">  
  2.     <li>  
  3.         <a href="http://www.yoursitename.com/Home">Home</a>  
  4.     </li>  
  5.     <li>  
  6.         <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  7.     </li>  
  8.     <li>  
  9.         <a href="http://www.yoursitename.com/Books">Books</a>  
  10.     </li>  
  11.     <li>  
  12.         <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  13.     </li>  
  14. </ul> 
Output


Step 3
  1. <div class="navbar-header">  
  2.     <span class="navbar-brand">King's Kart</span>  
  3. </div>  
  4. <div >  
  5.     <ul class="nav navbar-nav">  
  6.         <li>  
  7.             <a href="http://www.yoursitename.com/Home">Home</a>  
  8.         </li>  
  9.         <li>  
  10.             <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  11.         </li>  
  12.         <li>  
  13.             <a href="http://www.yoursitename.com/Books">Books</a>  
  14.         </li>  
  15.         <li>  
  16.             <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  17.         </li>  
  18.     </ul> 
Output


Step 4
  1. <div class="navbar-header">  
  2.     <span class="navbar-brand">King's Kart</span>  
  3. </div>  
  4. <div class="navbar-collapse collapse">  
  5.     <ul class="nav navbar-nav">  
  6.         <li>  
  7.             <a href="http://www.yoursitename.com/Home">Home</a>  
  8.         </li>  
  9.         <li>  
  10.             <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  11.         </li>  
  12.         <li>  
  13.             <a href="http://www.yoursitename.com/Books">Books</a>  
  14.         </li>  
  15.         <li>  
  16.             <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  17.         </li>  
  18.     </ul>  
  19. </div> 
Output

 
 
Step 5
  1. <div class="navbar navbar-inverse" role="navigation">  
  2.     <div class="navbar-header">  
  3.         <span class="navbar-brand">King's Kart</span>  
  4.     </div>  
  5.     <div class="navbar-collapse collapse">  
  6.         <ul class="nav navbar-nav">  
  7.             <li>  
  8.                 <a href="http://www.yoursitename.com/Home">Home</a>  
  9.             </li>  
  10.             <li>  
  11.                 <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  12.             </li>  
  13.             <li>  
  14.                 <a href="http://www.yoursitename.com/Books">Books</a>  
  15.             </li>  
  16.             <li>  
  17.                 <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  18.             </li>  
  19.         </ul>  
  20.     </div>
Output



Step 6
  1. <div class="navbar navbar-inverse" role="navigation">  
  2.     <div class="navbar-header">  
  3.         <button type="button" class="navbar-toggle" data-toggle="collapse">  
  4.             <span class="icon-bar"></span>  
  5.             <span class="icon-bar"></span>  
  6.             <span class="icon-bar"></span>  
  7.         </button>  
  8.         <span class="navbar-brand">King's Kart</span>  
  9.     </div>  
  10.     <div class="navbar-collapse collapse">  
  11.         <ul class="nav navbar-nav">  
  12.             <li>  
  13.                 <a href="http://www.yoursitename.com/Home">Home</a>  
  14.             </li>  
  15.             <li>  
  16.                 <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  17.             </li>  
  18.             <li>  
  19.                 <a href="http://www.yoursitename.com/Books">Books</a>  
  20.             </li>  
  21.             <li>  
  22.                 <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  23.             </li>  
  24.         </ul>  
  25.     </div>  
  26. </div>
Output
 
 
Step 7
  1. <div class="navbar navbar-inverse" role="navigation">  
  2.     <div class="navbar-header">  
  3.         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">  
  4.             <span class="icon-bar"></span>  
  5.             <span class="icon-bar"></span>  
  6.             <span class="icon-bar"></span>  
  7.         </button>  
  8.         <span class="navbar-brand">King's Kart</span>  
  9.     </div>  
  10.     <div class="navbar-collapse collapse" id="myidname">  
  11.         <ul class="nav navbar-nav">  
  12.             <li>  
  13.                 <a href="http://www.yoursitename.com/Home">Home</a>  
  14.             </li>  
  15.             <li>  
  16.                 <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  17.             </li>  
  18.             <li>  
  19.                 <a href="http://www.yoursitename.com/Books">Books</a>  
  20.             </li>  
  21.             <li>  
  22.                 <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  23.             </li>  
  24.         </ul>  
  25.     </div> 
Output
 
 
I will combined all the preceding 7 steps into a single HTML file.
 
BootstrapNav.hmtl
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.                 <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.                     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->  
  8.                     <title>Bootstrap Navigation with Toggle Button</title>  
  9.                     <!-- Bootstrap -->  
  10.                     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  
  11.                         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->  
  12.                         <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
  13.                         <!--[if lt IE 9]>  
  14.                         <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
  15.                         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>  
  16.                         <![endif]-->  
  17.                     </head>  
  18.                     <body>  
  19.                         <div class="navbar navbar-inverse" role="navigation">  
  20.                             <div class="navbar-header">  
  21.                                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myidname">  
  22.                                     <span class="icon-bar"></span>  
  23.                                     <span class="icon-bar"></span>  
  24.                                     <span class="icon-bar"></span>  
  25.                                 </button>  
  26.                                 <span class="navbar-brand">King's Kart</span>  
  27.                             </div>  
  28.                             <div class="navbar-collapse collapse" id="myidname">  
  29.                                 <ul class="nav navbar-nav">  
  30.                                     <li>  
  31.                                         <a href="http://www.yoursitename.com/Home">Home</a>  
  32.                                     </li>  
  33.                                     <li>  
  34.                                         <a href="http://www.yoursitename.com/EleK">Electronics</a>  
  35.                                     </li>  
  36.                                     <li>  
  37.                                         <a href="http://www.yoursitename.com/Books">Books</a>  
  38.                                     </li>  
  39.                                     <li>  
  40.                                         <a href="http://www.yoursitename.com/BustiK">Bustickets</a>  
  41.                                     </li>  
  42.                                 </ul>  
  43.                             </div>  
  44.                             <!-- jQuery (necessary for Bootstrap's JavaScript plugins)   Order is important -->  
  45.                             <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  46.                             <!-- Include all compiled plugins (below), or include individual files as needed -->  
  47.                             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  
  48.                     </body>  
  49. </html>      
OUTPUT
 
 
 
 

Reference: http://getbootstrap.com/

Similar Articles
Learn JavaScript for Professionals
"