How does navbar work in Bootstrap ?
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.
HTML
<!DOCTYPE html> < html > < head > <!-- Bootstrap CDN--> < 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 > <!--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 = "https://media.w3wiki.net/wp-content/uploads/20210101144014/gfglogo.png" 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" >w3wiki</ h1 > < h1 class = "display-5" >DSA Course</ h1 > < hr class = "my-2" /> < p class = "main text-justify" > The one-stop solution is w3wiki 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:
Contact Us