All for Joomla All for Webmasters

Bootstrap Navigation Bar

A navigation bar is like a navigation header that is placed at the top of the page. You can collapse or extend it according to the screen size.

You can create a standard navigation bar at the top of the page with with <nav class=”navbar navbar-default”>.

See this example:

  1.     <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <nav class=“navbar navbar-default”>
  11.   <div class=“container-fluid”>
  12.     <div class=“navbar-header”>
  13.       <a class=“navbar-brand” href=“#”>WebSiteName</a>
  14.     </div>
  15.     <ul class=“nav navbar-nav”>
  16.       <li class=“active”><a href=“#”>Home</a></li>
  17.       <li><a href=“#”>Page 1</a></li>
  18.       <li><a href=“#”>Page 2</a></li>
  19.       <li><a href=“#”>Page 3</a></li>
  20.     </ul>
  21.   </div>
  22. </nav>
  23. <div class=“container”>
  24.   <h3>Basic Navbar Example</h3>
  25.   <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  26. </div>
  27. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  28. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  29. </body>
  30. </html>

Bootstrap Inverted Navigation Bar

Inverted navigation bar provides an alternative black navbar. It can be used to style the default navigation bar by changing.navbar-default class into .navbar-inverse class .

See this example:

  1.   <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <nav class=“navbar navbar-inverse”>
  11.   <div class=“container-fluid”>
  12.     <div class=“navbar-header”>
  13.       <a class=“navbar-brand” href=“#”>WebSiteName</a>
  14.     </div>
  15.     <ul class=“nav navbar-nav”>
  16.       <li class=“active”><a href=“#”>Home</a></li>
  17.       <li><a href=“#”>Page 1</a></li>
  18.       <li><a href=“#”>Page 2</a></li>
  19.       <li><a href=“#”>Page 3</a></li>
  20.     </ul>
  21.   </div>
  22. </nav>
  23. <div class=“container”>
  24.   <h3>Inverted Navbar</h3>
  25.   <p>An inverted navbar is black instead of gray.</p>
  26. </div>
  27. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  28. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  29. </body>
  30. </html>

Bootstrap Navigation Bar with Dropdown

You can also add dropdown menu with navigation bars. The following example adds a dropdown menu for the “page 1” button.

See this example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <nav class=“navbar navbar-inverse”>
  11.   <div class=“container-fluid”>
  12.     <div class=“navbar-header”>
  13.       <a class=“navbar-brand” href=“#”>WebSiteName</a>
  14.     </div>
  15.     <ul class=“nav navbar-nav”>
  16.       <li class=“active”><a href=“#”>Home</a></li>
  17.       <li class=“dropdown”><a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Page 1 <span class=“caret”></span></a>
  18.         <ul class=“dropdown-menu”>
  19.           <li><a href=“#”>Page 1-1</a></li>
  20.           <li><a href=“#”>Page 1-2</a></li>
  21.           <li><a href=“#”>Page 1-3</a></li>
  22.         </ul>
  23.       </li>
  24.       <li><a href=“#”>Page 2</a></li>
  25.       <li><a href=“#”>Page 3</a></li>
  26.     </ul>
  27.   </div>
  28. </nav>
  29. <div class=“container”>
  30.   <h3>Navbar With Dropdown</h3>
  31.   <p>This example adds a dropdown menu for the “Page 1” button in the navigation bar.</p>
  32. </div>
  33. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  34. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  35. </body>
  36. </html>

Bootstrap Right-Aligned Navigation Bar

Use the .navbar-right class to right-align navigation bar buttons. In the following example, we add “Sign Up”and “Log in” button to the right in the navigation bar.

See this example:

  1.    <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Case</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <nav class=“navbar navbar-inverse”>
  11.   <div class=“container-fluid”>
  12.     <div class=“navbar-header”>
  13.       <a class=“navbar-brand” href=“#”>WebSiteName</a>
  14.     </div>
  15.     <ul class=“nav navbar-nav”>
  16.       <li class=“active”><a href=“#”>Home</a></li>
  17.       <li class=“dropdown”><a class=“dropdown-toggle” data-toggle=“dropdown” href=“#”>Page 1 <span class=“caret”></span></a>
  18.         <ul class=“dropdown-menu”>
  19.           <li><a href=“#”>Page 1-1</a></li>
  20.           <li><a href=“#”>Page 1-2</a></li>
  21.           <li><a href=“#”>Page 1-3</a></li>
  22.         </ul>
  23.       </li>
  24.       <li><a href=“#”>Page 2</a></li>
  25.       <li><a href=“#”>Page 3</a></li>
  26.     </ul>
  27.     <ul class=“nav navbar-nav navbar-right”>
  28.       <li><a href=“#”><span class=“glyphicon glyphicon-user”></span> Sign Up</a></li>
  29.       <li><a href=“#”><span class=“glyphicon glyphicon-log-in”></span> Login</a></li>
  30.     </ul>
  31.   </div>
  32. </nav>
  33. <div class=“container”>
  34.   <h3>Right Aligned Navbar</h3>
  35.   <p>The .navbar-right class is used to right-align navigation bar buttons.</p>
  36. </div>
  37. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  38. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  39. </body>
  40. </html>
PinIt
submit to reddit

Leave a Reply

Top