Saved Bookmarks
| 1. |
How to highlight the current link in Bootstrap Navbar? |
|
Answer» In a NavBar, if you want to highlight the current link, then use the .active class. Now, let us see how we can create more items in Navbar and highlight one of them. For the SECOND Navbar, we have HIGHLIGHTED the item “Tech”: <!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>Highlight Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-danger navbar-dark"> <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 active"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <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" href="#">Entertainment</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> </body> </html>The OUTPUT: |
|