Bootstrap Navbar Or Navigation Bar Tutorial With Examples

This tutorial explains all about Bootstrap 4 Navbar using examples including colored navbars, centered and vertical navbars, etc.:

In this tutorial, we have covered an introduction to the Bootstrap navbar, how to create a navbar, navbar contents, active and disabled links, colored navbars, navbar alignments, fixed navbars, and frequently asked questions (FAQs).

Please note that we have used Bootstrap version 4 in all examples.

=> Read Through The Easy Bootstrap Training Series

Let’s begin!

Introduction: Bootstrap NavBar

Bootstrap 4 Navbar

A Bootstrap NavBar (also known as navbar or navigation bar) is a navigation header that is placed at the top of the page (or rarely at the bottom of the page). By default, they are hidden when printing.

When you compare the Bootstrap 3 navigation bar with the version 4 navigation bar, the version 4 navigation bar has been entirely rewritten in flexbox and provides more support for alignment, responsiveness, and customization.

The following table summarizes the classes and attributes that we have used in this tutorial.

ClassUsage
The .navbar classThis class is used to create a navigation bar.
The .navbar-expand-sm|md|lg|xl classSince the nav bar is displayed collapse on the mobile-first approach, these classes specify at which breakpoint the nav bar will not be collapsed.
The .nav-item classThis class is used for the proper spacing of list items in the nav bar.
The .nav-link classThis class is used to style links in the nav bar.
The .navbar-dark classThis class is used to add a white text color to all links in the nav bar.
The .navbar-light classThis class is used to add a black text color to all links in the nav bar.
The .navbar-nav classThis class is used for full-height and lightweight navigation.
The .navbar-brand classThis class is used for company, product or project name or logo.
The .form-inline classThis class is used for any form controls and actions.
The .navbar-text classThis class is used to vertical-align any element in the nav bar except links.
The .dropdown classThis class is used to create dropdowns inside the nav bar.
The .navbar-toggler classThis class is used with the Bootstrap collapse plugin.
The .navbar-toggler-icon classThis class used to add a collapse icon to the collapsible button.
The .navbar-collapse classThis class is also used for grouping and hiding nav bar contents at a particular breakpoint.
The .justify-content-between classThis class is used for proper alignment of the nav links, forms, buttons, etc. inside the navigation bar.
The .active classThis class is used to highlight the current link in the navigation bar.
The .disabled classThis class is used to disable a link in the navigation bar.
The .navbar-dark classThis class is used to add a white color to all the links.
The .navbar-light classThis class is used to add a black color to all the links.
The .bg-primary class This class is used to add a blue color to the background.
The .bg-secondary class This class is used to add a grey color to the background.
The .bg-success class This class is used to add a green color to the background.
The .bg-danger class This class is used to add a red color to the background.
The .bg-warning class This class is used to add an orange color to the background.
The .bg-info class This class is used to add a light blue color to the background.
The .bg-light classThis class is used to add a light grey color to the background.
The .bg-dark class This class is used to add a dark grey color to the background.
The .justify-content-center classThis class is used to center the nav bar content.
The .fixed-top classThis class is used to make the navigation bar stay at the top of the page
The .fixed-bottom classThis class is used to make the navigation bar stay at the bottom of the page
The .sticky-top classThis class is used to fix the navigation bar at the top of the page when scrolling.
AttributeUsage
The data-toggle=" " attributeThis attribute is used on a controller element.
The data-target=" " attributeThis attribute is used to target a specific link to toggle.

Basic Bootstrap 4 NavBar

How to create a Basic NavBar

There are two methods to create a basic navigation bar.

  1. Using an <ul> element and <li> elements
  2. Without using <ul> and <li> elements

a) Creating a Basic Nav Bar using an <ul> Element and <li> Elements

We need the following classes to create a basic navigation bar.

  • The .navbar class
  • The .navbar-expand-sm|md|lg|xl class
  • The .navbar-nav class
  • The .nav-item class
  • The .nav-link class
  • The .bg-dark class (add a dark color to the navigation bar) or the .bg-light class (add a light color to the navigation bar)
  • The .navbar-dark (add a white text color to all links) class or the .navbar-light class (add a black text color to all links) [optional]

Add a <nav> element with the .navbar class, the .navbar-expand-* class, the .bg-light|dark class (and the .navbar-light|dark class). Inside the <nav> element, add a <ul> element with the .navbar-nav class, followed by the <li> elements with the .nav-item class and add the <a> elements with the .nav-link class inside the <li> elements to create a basic navigation bar.

The .navbar-nav class is used for full-height and lightweight navigation.

b) Creating a Basic NavBar without using <ul> and <li> Elements

Add a <nav> element with the .navbar class, the .navbar-expand-* class, the .bg-light|dark class (and the .navbar-light|dark class). Inside the <nav> element, add a <div> element with the .navbar-nav class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a basic navigation bar.

Note: The behavior of nav links in this method is similar to the behavior of nav items in the previous method, but using less markup.

Basic Bootstrap NavBar Examples

In this sub-section, we are going to discuss two basic examples.

Example 1:

The below programming code shows an example of a basic navigation bar with the <ul> and <li> elements. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>	
	
	<!--The Horizontal Nav Bar Becomes Vertical on Small Screens-->
	<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
		<!--Links-->
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" href="#">Link 1</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link 2</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link 3</a>
			</li>
		</ul>
	</nav>
		
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Example 2:

The below programming code shows an example of a navigation bar without using the <ul> and <li> elements. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>	
	
	<!--The Horizontal Nav Bar Becomes Vertical on Small Screens-->
	<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
		<!--Links-->
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">Link 1</a>
			<a href="#" class="nav-item nav-link">Link 2</a>
			<a href="#" class="nav-item nav-link">Link 3</a>
		</div>
	</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming codes (both the above codes show similar outputs).

Basic Navbar

More Supported Content

Nav Bar Brand

The .navbar-brand class is used for the company, product, or project name, or logo.

Nav Bar Forms

Add a <form> element (such as Bootstrap search bar) with the .form-inline class to add inputs and buttons side-by-side on the nav bar.

Input groups are also worked with navigation bars.

Nav Bar Text

The .navbar-text class is used to add vertically align any elements inside the navigation bar that do not link.

Nav Bar with Dropdown

You can also add dropdowns to the navigation bar.

Nav Bar Collapse

You can create responsive navigation bars (extend or collapse the navigation bar depending on the size of the screen). The .navbar-expand-sm|md|lg|xl classes specify at which breakpoint the navbar will not be collapsed, since the navbar is displayed collapse on the mobile-first approach.

Active and Disabled Links

Add the .active class to highlight the current link in the navigation bar.

Add the .disabled class to disable a link in the navbar. The link will turn grey and remove the hover effect. Disabled links are also un-clickable.

Examples of Supported Content

The below programming code shows examples of navigation bars with supported content.

You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>	
	
	<!--The Horizontal Nav Bar is Hidden on Small Screens and replaced by a Button-->
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	
		<!--Brand-->
		<a href="#" class="navbar-brand">Logo</a>
		<!--Toggler/collapsible Button-->
		<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
			<span class="navbar-toggler-icon"></span>
		</button>

		<!--Links-->
		<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
			<div class="navbar-nav">
				<!--Active Link-->
				<a href="#" class="nav-item nav-link active">Home</a>
				<a href="#" class="nav-item nav-link">Settings</a>
				<!--Dropdown-->
				<div class="nav-item dropdown">
					<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
					<div class="dropdown-menu">
						<a href="#" class="dropdown-item">Inbox</a>
						<a href="#" class="dropdown-item">Sent</a>
						<a href="#" class="dropdown-item">Drafts</a>
					</div>
				</div>
				<!--Disabled Link-->
				<a href="#" class="nav-item nav-link disabled">Notifications</a>
			</div>
		
			<!--Nav Bar Form-->
			<form class="form-inline">
				<input class="form-control" type="search" placeholder="Search" aria-label="Search">
				<button class="btn btn-outline-primary" type="submit">Search</button>
			</form>
			
			<!--Nav Bar Text-->
			<span class="navbar-text">
				Navbar text
			</span>
		
		</div>
		
	</nav>
		
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

For large screens:

More Supported Content For large screens

In the above screenshot, numbers indicate the following content:

  • 1- Navbar brand
  • 2- Active link
  • 3- Dropdown
  • 4- Disabled link
  • 5- Navbar form input (search bar with a button)
  • 6- Navbar text

For small screens:

More Supported Content For small screens

After clicking on the collapse button, the navigation bar is visible as shown in the below screenshot.

navigation bar is visible

Colored NavBars

Add the .bg-* contextual class to the <nav> element with the .navbar class to add a color to a nav bar.

There are eight contextual classes that we can use to add colors to the background of the navigation bars as shown in the below list.

  • The .bg-primary class – This class is used to add a blue color to the background.
  • The .bg-secondary class – This class is used to add a grey color to the background.
  • The .bg-success class – This class is used to add a green color to the background.
  • The .bg-danger class – This class is used to add red color to the background.
  • The .bg-warning class – This class is used to add orange color to the background.
  • The .bg-info class – This class is used to add a light blue color to the background.
  • The .bg-light class – This class is used to add a light grey color to the background.
  • The .bg-dark class – This class is used to add a dark grey color to the background.

Examples of colored navigation bars:

The below programming code shows examples of colored navigation bars. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>	
	
	<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-secondary navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-success navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-danger navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-warning navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-info navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-light navbar-light">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>

	<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
		<div class="navbar-nav">
			<a href="#" class="nav-item nav-link">eLibrary</a>
		</div>
	</nav>
		
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Colored Navbars

Centered And Vertical NavBars

Add the .justify-content-center class to center the nav bar content.

Remove the .navbar-expand-* class to create a vertical navigation bar.

Examples of centered and vertical nav bars:

The below programming code shows examples of centered and vertical navigation bars. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>	

		<h6 class="text-center">Centered Navbar</h6>
		<!--Centered Nav Bar-->
		<nav class="navbar navbar-expand-lg bg-light justify-content-center mb-5">
			<!--Links-->
			<div class="navbar-nav">
				<a href="#" class="nav-item nav-link">Home</a>
				<a href="#" class="nav-item nav-link">Profile</a>
				<a href="#" class="nav-item nav-link">Activities</a>
			</div>
		</nav> 
		
		<h6>Vertical Navbar</h6>
		<!--Vertical Nav Bar-->
		<nav class="navbar bg-light">
			<!--Links-->
			<div class="navbar-nav">
				<a href="#" class="nav-item nav-link">Home</a>
				<a href="#" class="nav-item nav-link">Profile</a>
				<a href="#" class="nav-item nav-link">Activities</a>
			</div>
		</nav> 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Centered and Vertical Navbars

Fixed NavBars

Top Fixed Nav Bars

Add the .fixed-top class to fix the nav bar at the top of the page independent of the page scroll.

Example of a top fixed navigation bar:

The below programming code shows an example of a top fixed navigation bar. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
        <style>
   .container{
       margin-top: 75px;
  }
         </style>
</head>
<body style="height:2000px">

            <!--Nav Bar --> 
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                  <a href="#" class="navbar-brand">Brand</a>
                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                              <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarCollapse">
                          <div class="navbar-nav">
                                 <a href="#" class="nav-item nav-link active">Home</a>
                                 <a href="#" class="nav-item nav-link">HTML</a>
                                 <a href="#" class="nav-item nav-link">CSS</a>
                          </div>
                   </div>
             </nav>

             <!-- Demo Content --> 
             <div class="container">
                    <p>You can add any content here...</p>
             </div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

top fixed navbar

Bottom Fixed Nav Bars

Add the .fixed-bottom class to fix the navigation bar at the bottom of the page independent of the page scroll.

Example of a bottom fixed navigation bar:

The below programming code shows an example of a bottom fixed navigation bar. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
            <link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
            <style>
.container{
        margin-top: 75px;
}
            </style>
</head>
<body style="height:2000px">

        <!--Nav Bar --> 
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
                <a href="#" class="navbar-brand">Brand</a>
                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
                   <div class="navbar-nav">
                            <a href="#" class="nav-item nav-link active">Home</a>
                            <a href="#" class="nav-item nav-link">HTML</a>
                            <a href="#" class="nav-item nav-link">CSS</a>
                  </div>
             </div>
         </nav>

         <!-- Demo Content --> 
         <div class="container">
                  <p>You can add any content here...</p>
          </div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

bottom fixed navbar

Sticky Nav Bars

Add the .sticky-top class to fix the navigation bar at the top of the page when you scroll past it.

Example of a sticky navigation bar:

The below programming code shows an example of a sticky navigation bar. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
	<style>
.container{
margin-top: 75px;
}
</style>
</head>
<body style="height:2000px">	

	<div class="container">
		<h3>Sticky Nabar</h3>
		<p>This is a sticky navbar example.</p>
	</div>
	
	<!-- Navbar -->    
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
		<a href="#" class="navbar-brand">Brand</a>
		<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarCollapse">
			<div class="navbar-nav">
				<a href="#" class="nav-item nav-link active">Home</a>
				<a href="#" class="nav-item nav-link">HTML</a>
				<a href="#" class="nav-item nav-link">CSS</a>
			</div>
		</div>
	</nav>

	<!-- Demo Content -->    
	<div class="container">
		<p>You can add any content here...</p>
	</div>
	
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>


The below screenshot shows the browser output of the above programming code.

sticky navbar

Frequently Asked Questions

In this section, we are going to look at some of the FAQs about the navbar.

Q #1) What is a Bootstrap navigation bar?

Answer: It is a navigation header that is placed at the top of the page (or rarely at the bottom of the page).

Q #2) What is the navbar brand?

Answer: The .navbar-brand class is used to add a brand name or a logo to the navigation bar.

Q #3) How can you change the color of the navigation bar?

Answer: Add the .bg-* contextual class to change the color of navigation bar. There are eight contextual classes used for background colors. They are the .bg-primary class, the .bg-secondary class, the .bg-success class, the .bg-danger class, the .bg-warning class, the .bg-info class, the .bg-light class and the .bg-dark class.

Q #4) How to make the navbar vertical?

Answer: Remove the .navbar-expand-* class to make the navbar vertical.

Q #5) How to center the nav bar content?

Answer: Add the .justify-content-center class to center the nav bar content.

Q #6) What is a data toggle?

Answer: It is an attribute used on a controller element.

Conclusion

A navigation bar is a navigation header usually placed at the top of a page. You can create different types of navigation bars using different styling options.

=> Visit Here To Learn Bootstrap From Scratch