HTML Tutorial

Bootstrap Navigation Bar - navbar

Bootstrap Tutorial » Bootstrap Navigation Bar

Navigation bars are components adapted to responsive web design and used as the main navigation element in both applications and websites.

>On mobile devices, they are initially minimized and when clicking on them, all their options are displayed. If the width of the device increases to a sufficient level, the navigation bars display all its contents horizontally.

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.

A standard navigation bar is created with <nav class="navbar navbar-default">.

Creating Bootstrap Navigation Bars navbar - example

A standard navigation bar is created with <nav class="navbar navbar-default">.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Navigation Bar - navbar Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<nav class="navbar navbar-default">

  <div class="container-fluid">

  <div class="navbar-header">

  <a class="navbar-brand" href="#">agernic.com</a>

  </div>

  <ul class="nav navbar-nav">

  <li class="active"><a href="#">Home</a></li>

  <li><a href="#">Profile</a></li>

  <li><a href="#">Messages</a></li>

  <li><a href="#">About As</a></li>

  </ul>

  </div>

  </nav>

  

  <div class="container">

  <h3>Basic Navbar Example</h3>

  <p>Bootstrap Navigation Bar - navbar Example</p>

  </div>
</body>

  </html>

Navigation Bar With Dropdown login anf search bar - example

We can include dropdowns, login and search box within the navbar.

Example:

<!DOCTYPE html>

  <html lang="en">

  <head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  </head>

  <body>
<nav class="navbar navbar-inverse">

  <div class="container-fluid">

  <div class="navbar-header">

  <a class="navbar-brand" href="#">WebSiteName</a>

  </div>

  <ul class="nav navbar-nav">

  <li class="active"><a href="#">Home</a></li>

  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>

  <ul class="dropdown-menu">

  <li><a href="#">Page 1-1</a></li>

  <li><a href="#">Page 1-2</a></li>

  <li><a href="#">Page 1-3</a></li>

  </ul>

  </li>

  <li><a href="#">Page 2</a></li>

  <li><a href="#">Page 3</a></li>

  </ul>

  <form class="navbar-form navbar-right" action="/action_page.php">

  <div class="input-group">

  <input type="text" class="form-control" placeholder="Search">

  <div class="input-group-btn">

  <button class="btn btn-default" type="submit">

  <i class="glyphicon glyphicon-search"></i>

  </button>

  </div>

  </div>

  </form>

  <button class="btn btn-success navbar-btn navbar-right">LOGIN</button>

  </div>

  </nav>

  

  <div class="container">

  <h3>Navbar With Dropdown</h3>

  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>

  </div>
</body>

  </html>

Bootstrap Navigation Bar vertical, templates, logo, templates free, template responsive, examples, with dropdown

Bootstrap navbar template, right, color, fixed, fixed top, with logo, center, padding, dropdown

Bootstrap Navigation Bar vertical, templates, logo, templates free, template responsive, examples, with dropdown

Bootstrap navbar template, right, color, fixed, fixed top, with logo, center, padding, dropdown
Bootstrap Navigation Bar - bootstrap

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.