Post
Ask Question

Bootstrap Navigation Bar With Toggle Button

Introduction

 
Navigation Bar is 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