What is a Bootstrap Navbar?

1.	What is a Bootstrap Navbar?
Answer» Add navigation header on your WEBSITE using the Bootstrap Navbar COMPONENT. A navigation bar can extend or collapse, depending on the screen size. On mobile, you may have seen navigation bar collapsing. However, on increasing the viewport size (browser size), the same responsive navigation bar appears horizontally. To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values: .navbar-expand -xl: Stack navbar vertically on extra large screen .navbar-expand -lg: Stack navbar vertically on large screen .navbar-expand -md: Stack navbar vertically on medium screen .navbar-expand -sm: Stack navbar vertically on small large screen Now, in a navbar, you have links, which a user can CLICK and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below: <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> </ul> Let us see what we discussed above in the following example: <!DOCTYPE html> <html lang="EN"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Three</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Four</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Five</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Six</a> </li> </ul> </nav> </body> </html> The following is the output that DISPLAY the navigation bar with 6 links:

Answer»

Add navigation header on your WEBSITE using the Bootstrap Navbar COMPONENT. A navigation bar can extend or collapse, depending on the screen size. On mobile, you may have seen navigation bar collapsing. However, on increasing the viewport size (browser size), the same responsive navigation bar appears horizontally.

To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:

.navbar-expand -xl: Stack navbar vertically on extra large screen .navbar-expand -lg: Stack navbar vertically on large screen .navbar-expand -md: Stack navbar vertically on medium screen .navbar-expand -sm: Stack navbar vertically on small large screen

Now, in a navbar, you have links, which a user can CLICK and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below:

Let us see what we discussed above in the following example:

<!DOCTYPE html> <html lang="EN"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Three</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Four</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Five</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Six</a> </li> </ul> </nav> </body> </html>

The following is the output that DISPLAY the navigation bar with 6 links:

What is a Bootstrap Navbar?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment