Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Navigation Bar
3.
Working Example
4.
Classes Used in Example
4.1.
Other Classes
5.
Alternate Approach
6.
Fixed Navigation Bar
7.
Navbar with Logo
8.
Search Bar
9.
Frequently Asked Questions
9.1.
What is Bootstrap?
9.2.
What is a navigation bar?
9.3.
Why should we use Bootstrap Navbar?
9.4.
Do we have more templates in Bootstrap?
9.5.
Are these templates responsive?
10.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap Navbar

Author Abhay Trivedi
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Bootstrap is an open-source framework that we can integrate into web projects to make our development easy. Bootstrap helps developers to save time by integrating the already done templates of various sections in a website.

introduction image

This blog will teach how to implement the navigation bar into the HTML(Hyper Text Markup Language)  file using the Bootstrap library. We will implement various examples of navigation bars so you can know what style or type of navigation you want on your website.

Navigation Bar

A Navigation bar is a Graphical User Interface that helps navigate one page to another on the website. With navigation, we can easily access the resources available on the website. It is the top section on a webpage that includes links for the other website areas. It performs an essential role in the website as it allows visitors to visit any section quickly & easily.

what is navigation bar?

Bootstrap Navbar makes adding a navigation bar to a webpage super easy such that the developers can focus on other prominent things and make their website look professional hassle-free!

Bootstrap provides you with its classes and navbar template so you can copy the code and call it a day. To use these templates and classes available in Bootstrap, you need to include Bootstrap in your website.

You should include the following link in the <head> </head>element to use bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


Additionally, to add functionality to your website, you should include the following script tags before the </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


HTML File

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
        <title>Code Studio</title>
    </head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Working Example

To implement the navigation, we need to include the .navbar class in the <nav> tag so that we can add the styling in <a> or other tags using the sub-classes available in the .navbar class.

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<nav class="navbar navbar-expand-lg bg-light navbar-light">
		<div class="container-fluid">
			<!-- brand name -->
			<a class="navbar-brand" href="#">Coding Ninjas</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
				aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<!-- Use collapse to make navbar collapse in small screens -->
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link active" aria-current="page" href="#">Main</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Other</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
							aria- expanded="false">Menu</a>
						<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
							<li>
								<a class="dropdown-item" href="#">First Item</a>
							</li>
							<li>
								<a class="dropdown-item" href="#">Second Item</a>
							</li>
							<li>
								<hr class="dropdown-divider" />
							</li>
							<li>
								<a class="dropdown-item" href="#">Last Item</a>
							</li>
						</ul>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled">Disabled Link</a>
					</li>
				</ul>
				<!-- search bar -->
				<form class="d-flex">
					<input class="form-control me-2" type="search" placeholder="Search" />
					<button class="btn btn-success" type="submit">Search</button>
				</form>
			</div>
		</div>
	</nav>
</body>

</html>


Output

 navbar output

In collapsed view:

responsive navbar output

When you click on the navigation icon, you will see the other elements in it.

responsive navbar output

We have implemented a basic navigation bar with all the essential criteria included. We have added a dropdown menu in the navigation with the .dropdown class.  We have also added a responsive behaviour in the navigation.

We have added the .collapse and .navbar-collapse classes in the <div> tag and included all the navigation elements in that <div> tag which will be collapsed when we change the screen size.

Using Bootstrap templates, you can save the time of resizing the components. With the help of the Bootstrap library, templates automatically adjust themselves according to the screen size.

Classes Used in Example

Here’s a list of the classes in Bootstrap we have used in the above code example.

  • .navbar-brand - Use it for the top brand element in the navbar. It works best with an anchor tag <a></a>.
     
  • .navbar-nav - Use for full height & lightweight navigation.
     
  • .nav-item - Use it to list an item.
     
  • .nav-link - Use for enclosing an anchor tag.
     
  • .navbar-toggler - Use with collapse plugin and other toggling behaviours.
     
  • .navbar-text - Use it to add vertically centred strings of text.
     
  • .active - Makes the currently active link highlighted.
     
  • .disabled - Makes a link disabled.
     
  • .collapse & .navbar-collapse - Use for grouping and hiding navbar contents.
     
  • .me-auto - Stands for “Margin End”. Assigns margin automatically.
     
  • .dropdown - Use it for dropdown elements.
     
  • .dropdown-toggle - Use it to open or close the dropdown menu.
     
  • .dropdown-menu - Use as a container for dropdown items.
     
  • .dropdown-item - Use it to list an item in the section.
     
  • .dropdown-divider - Sets a divider in the dropdown menu.

    
     Here are some of the most used classes required for your Bootstrap Navbar.

  • Bootstrap Navbar requires a “navbar” class inside <nav> element with “navbar-expand{-sm, -md, -lg, -xl, or -xxl}” for responsive collapsing. Each class represents a particular size.
  • -sm: small
  • -md: medium
  • -lg: large
  • -xl: extra large
  • -xxl: double extra large


Note - we use <nav> element instead of <div> since it is more specific.

  • Use the “navbar-brand” class for your brand name.
     
  • Use “navbar-{primarysecondarysuccesswarningdangerdarklightinfo}” to change the navbar's text color.
     
  • Use “bg-{primarysecondarysuccesswarningdangerdarklightinfo}” to change the navbar's background color.

Other Classes

  • .navbar-btn - Use to add a button in the navigation.
     
  • .navbar-default - it adds the default styling in the navigation bar.
     
  • .navbar-inverse - use it to change the default styling with a block theme navigation bar.
     
  • .navbar-form - if you want to add form elements in the navbar, you need to add this class.

Alternate Approach

You can implement the navigation bar without using the <ul> tag. You can achieve the same result by navigating the bar with <a> tag. A <a> tag links the elements with another URL or page. Let's see how we can implement it.

Here is the above code implemented without using a list.

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<nav class="navbar navbar-expand-lg bg-light navbar-light">
		<div class="container-fluid">
			<!-- brand name -->
			<a class="navbar-brand" href="#">Coding Ninjas</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<!-- Use collapse to make navbar collapse in small screens -->
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<div class="navbar-nav me-auto mb-2 mb-lg-0">
					<a class="nav-link active" aria-current="page" href="#">Main</a>
					<a class="nav-link" href="#">Other</a>
					<div class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
							data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">First Item</a>
							<a class="dropdown-item" href="#">Second Item</a>
							<hr class="dropdown-divider" />
							<a class="dropdown-item" href="#">Last Item</a>
						</div>
					</div>
					<a class="nav-link disabled">Disabled Link</a>
				</div>
				<!-- search bar -->
				<form class="d-flex">
					<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
					<button class="btn btn-success" type="submit">Search</button>
				</form>
			</div>
		</div>
	</nav>
</body>

</html>


Output

alternate approach navbar

Fixed Navigation Bar

Like the code below, we can fix the Bootstrap Navbar to the top or bottom so that it is always visible on the webpage. Add a fixed-top to stick the navbar at the top or use a fixed-bottom to stick it at the bottom of the screen.

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<nav class="navbar navbar-expand-lg navbar-inverse bg-danger navbar-dark fixed-top">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">Coding Ninjas</a>
		</div>
	</nav>
</body>

</html>


Output

fixed top output

     .fixed-bottom class

      We have added some random lorem Ipsum text to properly display the .fixed-bottom class.

      Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<h3>Fixed-bottom Example</h3>
	<div class="center">
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
			industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
			scrambled it to make a type
			specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
			remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
			containing Lorem Ipsum
			passages, and more recently with desktop publishing software like Aldus PageMaker including versions of
			Lorem Ipsum.
		</p>
	</div>
	<nav class="navbar navbar-expand-lg navbar-inverse bg-danger navbar-dark fixed-bottom">
		<div class="container-fluid">
			<a class="navbar-brand" href="#">Coding Ninjas</a>
		</div>
	</nav>

</body>

</html>


Output

fixed bottom output

Navbar with Logo

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<nav class="navbar navbar-light bg-dark">
		<a class="navbar-brand" href="#">
			<img src="logo22.png" width="100" height="40" class="d-inline-block align-top" alt="" />
		</a>
	</nav>
</body>

</html>


Output

navbar logo output

You can add an image in the navbar by adding the <img></img> tag in the <a> tag, and you need to include the image path in the src=’ ‘ property in <img> tag.

Search Bar

We can include a search bar in the navbar. We need to add the <form></form> tag, and inside, we need to add the <input> and <button> tags.

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
		crossorigin="anonymous"></script>
	<title>Code Studio</title>
</head>

<body>
	<nav class="navbar navbar-light bg-dark">
		<a class="navbar-brand" href="#">
			<img src="logo22.png" width="100" height="40" class="d-inline-block align-top" alt="" />
		</a>
		<form class="d-flex" role="search">
			<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
			<button class="btn btn-outline-success" type="submit">Search</button>
		</form>
	</nav>
</body>

</html>


Output

search bar output

Also Read About, javascript replace

Frequently Asked Questions

What is Bootstrap?

Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript-based interface components and design templates like forms, buttons, navbar, and many more.

What is a navigation bar?

A Navigation bar comes under Graphical User Interface that helps in accessing information. It is the top section on a webpage that includes links for the other website areas.

Why should we use Bootstrap Navbar?

Bootstrap Navbar is free & open-source, and it saves the time & effort of a developer as they are using a ready-made template and can focus on the logic instead of worrying about the styling.

Do we have more templates in Bootstrap?

There are templates for almost every website component in the Bootstrap library.

Are these templates responsive?

Yes, the templates in Bootstrap are responsive; you do not need to make them responsive.

Conclusion

In this blog, we have discussed the navigation bar. We have learned how to implement the navigation bar templates with the help of Bootstrap. We have also discussed a different approach to implementing a Bootstrap navbar.

You can check out the following links for more Bootstrap information.

To learn more about DSA, competitive coding, and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.

Happy Coding!

Previous article
Bootstrap Input Groups
Next article
Bootstrap - Breadcrumb
Live masterclass