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!
What You Will Learn:
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.
| Class | Usage |
|---|---|
| The .navbar class | This class is used to create a navigation bar. |
| The .navbar-expand-sm|md|lg|xl class | Since 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 class | This class is used for the proper spacing of list items in the nav bar. |
| The .nav-link class | This class is used to style links in the nav bar. |
| The .navbar-dark class | This class is used to add a white text color to all links in the nav bar. |
| The .navbar-light class | This class is used to add a black text color to all links in the nav bar. |
| The .navbar-nav class | This class is used for full-height and lightweight navigation. |
| The .navbar-brand class | This class is used for company, product or project name or logo. |
| The .form-inline class | This class is used for any form controls and actions. |
| The .navbar-text class | This class is used to vertical-align any element in the nav bar except links. |
| The .dropdown class | This class is used to create dropdowns inside the nav bar. |
| The .navbar-toggler class | This class is used with the Bootstrap collapse plugin. |
| The .navbar-toggler-icon class | This class used to add a collapse icon to the collapsible button. |
| The .navbar-collapse class | This class is also used for grouping and hiding nav bar contents at a particular breakpoint. |
| The .justify-content-between class | This class is used for proper alignment of the nav links, forms, buttons, etc. inside the navigation bar. |
| The .active class | This class is used to highlight the current link in the navigation bar. |
| The .disabled class | This class is used to disable a link in the navigation bar. |
| The .navbar-dark class | This class is used to add a white color to all the links. |
| The .navbar-light class | This 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 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. |
| The .justify-content-center class | This class is used to center the nav bar content. |
| The .fixed-top class | This class is used to make the navigation bar stay at the top of the page |
| The .fixed-bottom class | This class is used to make the navigation bar stay at the bottom of the page |
| The .sticky-top class | This class is used to fix the navigation bar at the top of the page when scrolling. |
| Attribute | Usage |
|---|---|
| The data-toggle=" " attribute | This attribute is used on a controller element. |
| The data-target=" " attribute | This attribute is used to target a specific link to toggle. |
How to create a Basic NavBar
There are two methods to create a basic navigation bar.
- Using an <ul> element and <li> elements
- 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).
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:
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:
After clicking on the collapse button, the navigation bar is visible as shown in the below screenshot.
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.
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.
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.
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.
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.
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