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/