Signup/Sign In

Bootstrap Navbar

Bootstrap Navbar provides attractive headers to the website pages. It is used for styling the website's name and navigating the drop-down menus. Navbar is generally placed at the top of the web page. These are responsive in nature. Before creating a navbar there are some important points to know.

Getting started with the navbar

  • To create, add .navbar, .navbar-default with navbar class. For responsive sites add .navbar-expand-{xs,sm,md,lg,xl} along with .navbar depending on screen size.
  • Add a header .navbar-header with <div> class.
  • Add a .navbar-brand with <a> tag
  • For list of menus add .navbar or nav navbar-nav in <ul> tag.

Example: Creating bootstrap navbar

Here is a basic example of how to create a navbar and how it works.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Navbar</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-expand-lg navbar-light bg-light>
   <div class ="container-fluid">
    <div class=" navbar navbar-header">
	 <a class="navbar-brand" href="#">studytonight</a>
	 </div>
	 <ul class ="nav navbar-nav">
	  <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Tests</a></li>
      <li><a href="#">About us</a></li>
     </ul>
  </div>
</nav>
</body>
</html>

Output:

In the above example, A light theme background is used. we can set the background as per our requirement.

Navbar

Bootstrap Navbar Supported Classes

We can use these claases to make navbar as per the requirement.

  • .navbar -brand - It is used for naming the website
  • .navbar-nav - Used for full height and smooth navigation. It also supports drop-down menus.
  • .navbar-toggler - It is used with collapse plugins and for other navigation toggling behaviors.
  • .form-inline - It is used for form controls and action.
  • .navbar-text - It is used for adding vertical centered text.
  • .collapse.navbar-collapse - It is used for grouping and hiding navbar contents by a parent breakpoint.

Dropdown in the navbar:

To create a dropdown in the navbar, we can use the .dropdown class.

<!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-expand-lg navbar-dark primary-color>
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Studytonight</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="#">Menu <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Study Material</a></li>
          <li><a href="#">Courser</a></li>
          <li><a href="#">Career</a></li>
        </ul>
      </li>
      <li><a href="#"></a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</nav>
  


</body>
</html>

Output:

Here is the output demonstrating dropdown in the navbar.

Navbar-dropdown

Buttons in Bootstrap Navbar

Navbar allows to add button, so we can add buttons in the navbar by using <button> tag.

<!DOCTYPE html>
<html lang="en">
<head>
 
<title> Bootstrap Navbar</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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark primary-color>
   <div class ="container-fluid">
    <div class=" navbar navbar-header">
	 <a class="navbar-brand" href="#">studytonight</a>
	 </div>
	    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
	  <li><a href="#">Menu</a></li>
	  <li><a href="#">Tests</a></li>
      <li><a href="#">About us</a></li>
     </ul>
	 <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>
</body>
</html>

Output

Here is the output demonstrating buttons in the navbar.

Navbar-button

Forms in Bootstrap Navbar

We have seen that every website has a search box for searching. This search box is created using forms in the navbar. To add form in navbar .navbar-form class is used. let us demonstrate how forms are created. Let's see an example.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Navbar</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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
   <div class ="container-fluid">
    <div class=" navbar navbar-header">
	 <a class="navbar-brand" href="#">studytonight</a>
	 </div>
	 <ul class ="nav navbar-nav">
	  <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Tests</a></li>
      <li><a href="#">About us</a></li>
	  
     </ul>
	 <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>

  </div>
</nav>

  
</body>
</html>

Output:

Here is the output showing form in the navbar.

Navbar-form

Example: Text in Bootstrap Navbar

To add text to the navbar, bootstrap provides .navbar-text class. We can write text in the navbar using .navbar-text.

 <title> Bootstrap Navbar</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://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" </script>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark primary-color>
   <div class ="container-fluid">
    <div class=" navbar navbar-header">
	 <a class="navbar-brand" href="#">studytonight</a>
	 </div>
	    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
	  <li><a href="#">Menu</a></li>
	  <li><a href="#">Tests</a></li>
      <li><a href="#">About us</a></li>
	  
     </ul>
	 <span class="navbar-text white-text">
      We can add text in navbar
    </span>
	

  </div>
</nav>

 
</body>
</html>

Output:

Here is the output demonstrating how to add text in the navbar.

navbar-text

Conclusion

Here we have learned how we can add a navbar to a web page and experiment with it to modify the header of the web page.