Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Add a gray background color to the active link in a default Bootstrap navbar

Bootstrap Web Development CSS Framework

To add gray background color to the active link, use the .active class in Bootstrap.

You can try to run the following code to implement .active class ?

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <nav class = "navbar navbar-default">
         <div class = "container-fluid">
            <div class = "navbar-header">
               <a class = "navbar-brand" href = "#">Website</a>
            </div>
            <ul class = "nav navbar-nav">
               <li class = "active"><a href = "#">Home</a></li>
               <li><a href = "#">Tutorials</a></li>
               <li><a href = "#">Quiz</a></li>
            </ul>
         </div>
      </nav>
      <div class = "container">
         <h3>Demo</h3>
         <p>This is demo text.</p>
      </div>
   </body>
</html>
Updated on: 2026-03-11T22:50:42+05:30

686 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements