How to create Navbar in Bootstrap?

1.	How to create Navbar in Bootstrap?
Answer» 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 Navbar</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-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Technology</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Research</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">FESTIVALS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> </ul> </nav> </body> </html> The following is the output that display the navigation bar with 6 links:

Answer»

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 Navbar</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-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Technology</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Research</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">FESTIVALS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> </ul> </nav> </body> </html>

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

How to create Navbar in Bootstrap?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment