Bootstrap Nav: How To Use Bootstrap 4 Navigation Tabs & Pills

By Sruthy

By Sruthy

Sruthy, with her 10+ years of experience, is a dynamic professional who seamlessly blends her creative soul with technical prowess. With a Technical Degree in Graphics Design and Communications and a Bachelor’s Degree in Electronics and Communication, she brings a unique combination of artistic flair…

Learn about our editorial policies.
Updated January 30, 2025

This tutorial explains all about Bootstrap 4 Nav including Active and Disabled Nav links, Alignments, Pills, Tabs, etc.:

In this Bootstrap 4 nav tutorial, we have covered an introduction to Bootstrap nav, how to create a basic nav, examples of a basic nav, active nav links, disabled nav links, horizontal nav, vertical nav, tabs with dropdowns, toggleable tabs, fill tabs, justified tabs, pills with dropdowns, toggleable pills, fill pills, justified pills.

We have also enlisted some frequently asked questions. Please note that we have used Bootstrap version 4 in all examples.

=> Visit Here To See The Bootstrap Training Series For All

Let’s begin!

Bootstrap Nav

Bootstrap 4 Navs

Bootstrap 4 Nav (nav menu) is a simple horizontal menu that consists of nav components such as tabs and pills. We use navs for easy navigation between pages.

When you compare Bootstrap 3 navs with version 4 navs, version 4 rewrote nav components in flexbox.

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

ClassUsage
The .nav classThis class is used to build all kinds of Bootstrap navigation components.
The .nav-item classThis class is used for the proper spacing of list items in the nav.
The .nav-link classThis class is used to style links in the nav.
The .active classThis class is used to highlight the current link.
The .disabled classThis class is used to make a link un-clickable.
The .justify-content-center classThis class is used to center a nav.
The .justify-content-end classThis class is used to right-align a nav.
The .flex-column classThis class is used to create a vertical nav.
The .nav-tabs classThis class is used to create navigation tabs.
The .nav-pills classThis class is used to create navigation pills.
The .nav-fill classThis class allows nav items to fill all horizontal space but does not have the same width.
The .nav-justified classThis class allows nav items to fill all horizontal space and every nav item has the same width.
The .tab-content classThis class is used to create togglable tabs.
The .tab-pane classThis class is also used to create togglable tabs.
The .fade classThis class is used to add a fading animation effect when navigating.
AttributeUsage
The data-toggle="tab" attributeThis attribute is used to create togglable tabs.
The data-toggle="pill" attributeThis attribute is used to create togglable pills.
The data-toggle="dropdown" attributeThis attribute is used to create tabs or pills with dropdowns.

Basic Bootstrap 4 Nav

How to create a Basic Nav

There are two methods to create a basic Bootstrap nav.

  1. Using an <ul> element and <li> elements
  2. Using a <nav> element

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

We need the following classes to create a basic nav using this method.

  • The .nav class
  • The .nav-item class
  • The .nav-link class

Add an <ul> element with the .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 nav.

b) Creating a Basic Nav using a <nav> Element

Similar to the above method, we need the following classes to create a basic nav using this method.

  • The .nav class
  • The .nav-item class
  • The .nav-link class

Add a <nav> element with the .nav class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a basic nav.

Note 1: Both the above methods use the same classes, but different tags/elements.

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

Examples of Basic Navs

In this sub-section, we are going to discuss two basic nav examples. The first example is creating a basic nav using an <ul> element and <li> elements, and the second example is creating a basic nav using the <nav> element.

Example 1:

The below programming code shows an example of a basic nav with an <ul> element 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>	

	<ul class="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>
		
<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 basic nav with the <nav> element. 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="nav">
		<a class="nav-item nav-link" href="#">Link 1</a>
		<a class="nav-item nav-link" href="#">Link 2</a>
		<a class="nav-item nav-link" href="#">Link 3</a>
	</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 Navs

Active And Disabled Nav Links

Active Nav Links

Add the .active class to highlight the current link.

Disabled Nav Links

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

Examples of Active and Disabled Nav Links

The below programming code shows an example of an active nav link, a default nav link, and a disabled nav link. 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="nav">
		<a class="nav-item nav-link active" href="#">Active Link</a>
		<a class="nav-item nav-link" href="#">Default Link</a>
		<a class="nav-item nav-link disabled" href="#">Disabled Link</a>
	</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

Active and Disabled Nav Links

Nav Alignments

Types of Nav Alignments

Navs can be categorized into two groups based on the alignment. They are,

  1. Horizontal nav
  2. Vertical nav

The horizontal navs can be further divided into three categories. They are,

  • Left-aligned nav
  • Centered nav
  • Right-aligned nav

Horizontal Navs

  • Left-aligned Navs: By default, navs are left-aligned. Therefore, you do not need any additional classes to left-align a nav.
  • Centered Navs: Add the .justify-content-center class to center a nav.
  • Right-aligned Navs: Add the .justify-content-end class to right-align a nav.

Vertical Navs

Add the .flex-column class to create a vertical nav.

Examples of Nav Alignments

The below programming code shows the following examples related to nav alignments.

  • A left-aligned nav
  • A centered nav
  • A right-aligned nav
  • A vertical nav

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>Left-aligned/Default Nav</h6>
	<nav class="nav">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">About Us</a>
		<a href="#" class="nav-item nav-link">Services</a>
	</nav>
	
	<h6 class="text-center">Centered Nav</h6>
	<nav class="nav justify-content-center">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">About Us</a>
		<a href="#" class="nav-item nav-link">Services</a>
	</nav>
	
	<h6 class="text-right">Right-aligned Nav</h6>
	<nav class="nav justify-content-end">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">About Us</a>
		<a href="#" class="nav-item nav-link">Services</a>
	</nav>
	
	<h6>Vertical Nav</h6>
	<nav class="nav flex-column">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">About Us</a>
		<a href="#" class="nav-item nav-link">Services</a>
	</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.

nav alignments

Bootstrap 4 Tabs

Basic Tabs

Bootstrap tabs are nav components.

Add a <nav> element with the .nav class and the .nav-tabs class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a tabbed navigation interface.

Tabs with Dropdowns

You can create tabs with dropdowns.

In addition to the the .nav class, the .nav-tabs class, the .nav-item class and the .nav-link class, we need the .dropdown class, the .dropdown-toggle class, the .dropdown-menu class, the .dropdown-item class and the data-toggle=”dropdown” attribute to create tabs with dropdowns.

Toggleable Tabs

Toggleable tabs are also known as dynamic tabs.

We use the .tab-content class and the .tab-pane class to create tab panes. Further, we need the data-toggle=”tab” attribute to make the tabs toggleable.

Fill Tabs

Add the .nav-fill class to create filled tabs. The .nav-fill class allows nav items to fill all horizontal space but does not have the same width. Nav items will have different widths based on their content.

Justified Tabs

Add the .nav-justified class to allow nav items to fill all horizontal space and every nav item has the same width.

Examples of Tabs

The below programming code shows the following examples related to tabs.

  • Basic tabs
  • Tabs with a dropdown
  • Toggleable tabs
  • Fill tabs
  • Justified tabs

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>Basic Tabs</h6>
	<nav class="nav nav-tabs mb-5">
		<!--Home is an Active Tab-->
		<a href="#" class="nav-item nav-link active">Home</a>
		<a href="#" class="nav-item nav-link">Our Work</a>
		<a href="#" class="nav-item nav-link">Contact Us</a>
	</nav>
	
	<h6>Tabs with a Dropdown</h6>
	<nav class="nav nav-tabs mb-5">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">Our Work</a>
		<div class="nav-item dropdown">
			<!--A Tab with a Dropdown-->
			<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Contact Us</a>
			<div class="dropdown-menu">
				<a href="#" class="dropdown-item">Email</a>
				<a href="#" class="dropdown-item">Fax</a>
				<a href="#" class="dropdown-item">Phone</a>
			</div>
		</div>
	</nav>
	
	<h6>Toggleable Tabs</h6>
	<!--Nav Tabs-->
	<nav class="nav nav-tabs">
		<a href="#home" class="nav-item nav-link" data-toggle="tab">Home</a>
		<a href="#work" class="nav-item nav-link" data-toggle="tab">Our Work</a>
		<a href="#contact" class="nav-item nav-link" data-toggle="tab">Contact Us</a>
	</nav>
	<!--Nav Panes-->	
	<div class="tab-content mb-5">
		<!--The Tab Pane with the #home is an Active Tab Pane-->
		<div class="tab-pane container active" id="home">Sample content 1</div>
		<div class="tab-pane container fade" id="work">Sample content 2</div>
		<div class="tab-pane container fade" id="contact">Sample content 3</div>
	</div>
	
	<h6>Fill Tabs</h6>
	<nav class="nav nav-tabs nav-fill mb-5">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">Our Creative Work</a>
		<!--Contact Us is an Active Tab-->
		<a href="#" class="nav-item nav-link active">Contact Us</a>
	</nav>
	
	<h6>Justified Tabs</h6>
	<nav class="nav nav-tabs nav-justified">
		<a href="#" class="nav-item nav-link">Home</a>
		<a href="#" class="nav-item nav-link">Our Creative Work</a>
		<!--Contact Us is an Active Tab-->
		<a href="#" class="nav-item nav-link active">Contact Us</a>
	</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.

tabs

Bootstrap 4 Pills

Basic Pills

Similar to tabs, pills are also nav components.

Add a <nav> element with the .nav class and the .nav-pills class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a basic pill interface.

Pills with Dropdowns

You can create pills with dropdowns.

In addition to the the .nav class, the .nav-pills class, the .nav-item class and the .nav-link class, we need the .dropdown class, the .dropdown-toggle class, the .dropdown-menu class, the .dropdown-item class and the data-toggle=”dropdown” attribute to create pills with dropdowns.

Toggleable Pills

Toggleable pills are also known as dynamic pills.

We use the .tab-content class and the .tab-pane class to create tab panes. Further, we need the data-toggle=”pill” attribute to make the pills toggleable.

Fill Pills

Add the .nav-fill class to create filled pills. The .nav-fill class allows nav items to fill all horizontal space but does not have the same width. Nav items will have different widths based on their content.

Justified Pills

Similar to justified tabs, add the .nav-justified class to allow nav items to fill all horizontal space, and every nav item has the same width.

Examples of Pills

The below programming code shows the following examples related to pills.

  • A basic pill interface
  • Pills with a dropdown
  • Toggleable pills
  • Fill pills
  • Justified pills

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>Basic Pills</h6>
          <nav class="nav nav-pills mb-5">
                   <!--Home is an Active Pill-->
                   <a href="#" class="nav-item nav-link active">Home</a>
                   <a href="#" class="nav-item nav-link">Our Work</a>
                   <a href="#" class="nav-item nav-link">Contact Us</a>
           </nav>

           <h6>Pills with a Dropdown</h6>
           <nav class="nav nav-pills mb-5">
                  <a href="#" class="nav-item nav-link">Home</a>
                  <a href="#" class="nav-item nav-link">Our Work</a>
                  <div class="nav-item dropdown">
                           <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Contact Us</a>
                           <!--Dropdown-->
                           <div class="dropdown-menu">
                                    <a href="#" class="dropdown-item">Email</a>
                                    <a href="#" class="dropdown-item">Fax</a>
                                    <a href="#" class="dropdown-item">Phone</a>
                           </div>
                  </div>
          </nav>

          <h6>Toggleable Pills</h6>
          <!--Nav Pills-->
          <nav class="nav nav-pills">
                   <a href="#home" class="nav-item nav-link" data-toggle="pill">Home</a>
                   <a href="#work" class="nav-item nav-link" data-toggle="pill">Our Work</a>
                   <a href="#contact" class="nav-item nav-link" data-toggle="pill">Contact Us</a>
          </nav>
          <!--Tab Panes--> 
          <div class="tab-content mb-5">
                   <!--The Tab Pane with the #home is an Active Tab Pane-->
                   <div class="tab-pane container active" id="home">Sample content 1</div>
                   <div class="tab-pane container fade" id="work">Sample content 2</div>
                   <div class="tab-pane container fade" id="contact">Sample content 3</div>
           </div>

           <h6>Fill Pills</h6>
           <nav class="nav nav-pills nav-fill mb-5">
                    <a href="#" class="nav-item nav-link">Home</a>
                    <a href="#" class="nav-item nav-link">Our Creative Work</a>
                    <!--Contact Us is an Active Pill-->
                    <a href="#" class="nav-item nav-link active">Contact Us</a>
           </nav>

           <h6>Justified Pills</h6>
           <nav class="nav nav-pills nav-justified">
                   <a href="#" class="nav-item nav-link">Home</a>
                   <a href="#" class="nav-item nav-link">Our Creative Work</a>
                   <!--Contact Us is an Active Pill-->
                   <a href="#" class="nav-item nav-link active">Contact Us</a>
           </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.

pills

Frequently Asked Questions

In this section, we are going to look at some of the frequently asked questions (FAQs) of navs.

Q #1) What is a Bootstrap nav?

Answer: It is a simple horizontal menu that consists of nav components such as tabs and pills.

Q #2) What does the nav class do?

Answer: The .nav class is used to build all kinds of navigation components.

Q #3) What are nav links?

Answer: Nav links are the links used in the navigation menu for navigation.

Q #4) How to align a nav to the right?

Answer: Add the .justify-content-end class to align the nav to the right.

Q #5) How to align a nav to the left?

Answer: By default, navs are left-aligned. Therefore, you do not need any additional classes to align the nav to the left.

Q #6) How to make the nav vertical?

Answer: Add the .flex-column class to make the nav vertical.

Conclusion

A nav or a nav menu is a simple horizontal menu. Bootstrap 4 helps to build nav components such as tabs and pills easily and provides a wide range of classes to style the nav components.

=> Check Out The Perfect Bootstrap Training Guide Here

Was this helpful?

Thanks for your feedback!

Leave a Comment