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.
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”/>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integrity=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anonymous”></script>
- 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 rel = "stylesheet" href =
integrity =
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin = "anonymous" />
integrity =
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous" >
</ script >
< script src =
integrity =
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin = "anonymous" >
</ 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 src =
class = "navbar-image" alt = "GFG logo" />
</ a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNavAltMarkup"
aria-controls = "navbarNavAltMarkup" aria-expanded = "false" aria-label = "Toggle navigation" >
< 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: