InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How to make a link unclickable in Bootstrap Navbar? |
|
Answer» In a NavBar, if you want to make a link unclickable, then use the .disabled class. Let’s say we have a Navbar with some items and out of which you want to disable the “Entertainment” link and make unclickable. For that, use the .disabled class LIKE this: <li class="nav-item"> <a class="nav-link disabled" href="#">Tech</a> </li>Now, let us see how we can create more items in Navbar and disable one of them. For the second Navbar, we have made the link “Tech” unclickable: <!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> <DIV class="CONTAINER"> <h3>Disable Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-danger navbar-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 disabled" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Tech</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-primary navbar-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="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> </body> </html>The output: |
|