A Navbar is a navigation header that is placed at the top of the page which helps to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The .navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using .navbar-expand-xl|lg|md|sm class. So, It provides flexibility to the web page.
Prerequisites: For understanding the navbar concept, the basics knowledge of HTML, CSS, and Bootstrap is required.
Step by Step Guide to implement Navbar in Bootstrap:
- Bootstrap CDN: To use the code snippets provided by Bootstrap, we need to add the following CDN files within the HTML head element.
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet"/>
<script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Nav Bar -->
</body>
</html>
- Add <nav> tag with .navbar and .navbar-expand-lg navbar-dark bg-dark class in <body> tag.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>- For adding the brand logo, we need a .navbar-brand class that will contain the image along with the alt attribute, if the image is not loaded properly then the text will be displayed.
<a class="navbar-brand" href="#">- We need a toggle button by adding the .navbar-toggler & .collapse navbar-collapse classes that will display or hide the menu item while clicking the button.
- Now, add the nav items inside the Navbar.
Implementation: We need the following syntax to understand the working of Navbar:
- HTML nav element: The HTML nav element is a container element similar to the HTML div element. We use the HTML nav element to add a Navbar to our website.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>- Nav Items inside Navbar: To add the nav items inside the Navbar by using the following syntax:-
<a class="nav-link active" href="#">
Home
<span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Tutorials</a>
<a class="nav-link disabled" href="#"
tabindex="-1" aria-disabled="true">
Disabled
</a>
- Nav link: To add the link in the web page by using the following syntax:-
<a class="nav-link" href="#">About Us</a>Example: This example illustrates the Bootstrap Navigation bar. We have added a logo and some information for the web page. If you click on the Navbar icon, then it's shows all the information related to the web page in list-form.
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN-->
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet"/>
<script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
<!--CSS-->
<style>
.navbar-image {
width: 80px;
height: 80px;
padding: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img alt="GFG logo" class="navbar-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"/>
</a>
<button aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavAltMarkup" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-link active" href="#">
Home
<span class="sr-only">
(current)
</span>
</a>
<a class="nav-link" href="#">
About Us
</a>
<a class="nav-link" href="#">
Tutorials
</a>
<a class="nav-link" href="#">
Student
</a>
<a class="nav-link" href="#">
Courses
</a>
<a class="nav-link" href="#">
Help
</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="display-3 text-success">
GeeksforGeeks
</h1>
<h1 class="display-5">
DSA Course
</h1>
<hr class="my-2"/>
<p class="main text-justify"> The one-stop solution is GeeksforGeeks DSA Self-Paced Course with Lifetime Access is a complete package for you to learn and master all the Data Structure Concepts. </p>
<a class="btn btn-primary btn-md" href="#" role="button">
Know more
</a>
</div>
</div>
</body>
</html>
Output:
