How to Set navbar active class with Bootstrap and AngularJS ? Last Updated : 08 Sep, 2022 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to set the navbar active class with Bootstrap and AngularJS, & will know its implementation through the example. To accomplish this task, you can use ng-controller(NavigationController) to set the bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= "active" when the angular route is clicked. The below example implements the above approach. Example: This example explains how to set bootstrap navbar active class with AngularJS using ng-controller. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Bootstrap Navbar Change Active Class Link </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'> </script> <script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'> </script> <style> body { margin: 20px; } #topheader .navbar-nav li > a { text-transform: capitalize; color: #333; -webkit-transition: background-color .2s, color .2s; transition: background-color .2s, color .2s; } #topheader .navbar-nav li > a:hover, #topheader .navbar-nav li > a:focus { background-color: #005596; color: #fff; } #topheader .navbar-nav li.active > a { background-color: #3990E0; color: white; } </style> </head> <body> <div id="topheader"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" style="color: green;"> GeeksforGeeks </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#home">home</a> </li> <li> <a href="#page1">HTML</a> </li> <li> <a href="#page2">CSS</a> </li> <li> <a href="#page3">JavaScript</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> <a href="#">Front-End</a> </li> </ul> </div> </div> </nav> </div> <script> $( '#topheader .navbar-nav a' ).on('click', function () { $( '#topheader .navbar-nav' ).find( 'li.active' ) .removeClass( 'active' ); $( this ).parent( 'li' ).addClass( 'active' ); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Set navbar active class with Bootstrap and AngularJS ? K KumariShwetha Follow Improve Article Tags : Technical Scripter Web Technologies Bootstrap AngularJS Technical Scripter 2019 Bootstrap-Questions AngularJS-Questions +3 More Similar Reads How to set active class to nav menu from bootstrap? To dynamically set the active class on Bootstrap navigation menus based on scroll or click events, JavaScript is employed to track the web page's position. Functions are utilized to handle these events, ensuring the active class is applied to the relevant navigation sections accordingly.ApproachThe 3 min read How to set active tab style with AngularJS ? In this article, we will see how to set an active tab style using AngularJS, & will also understand its implementation through the example. This task can be accomplished by implementing the isActive and the ng-controller method. We will perform this task with 2 different methods. Method 1: The n 2 min read How to fix Bootstrap Navbar Always on Top ? As we have observed on many web pages the navbar is always present at the top of the page and when we scroll the page down it sticks to the top. The below approaches can be used to accomplish this task in Bootstrap. Table of Content Using fixed-top classUsing sticky-top classUsing fixed-top classBoo 12 min read How to open popup using Angular and Bootstrap ? Adding Bootstrap to your Angular application is an easy process. Just write the following command in your Angular CLI. It will add bootstrap into your node_modules folder. ng add @ng-bootstrap/ng-bootstrap Approach: Import NgbModal module in the TypeScript file of the corresponding component, and th 2 min read How to use bootstrap 4 in angular 2? Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. The Bootstrap framework can be used together with modern JavaScript web & mobile frameworks like Angular. Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework. This 2 min read How to align two navbars in bootstrap? Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization. ApproachThe HTML document imports Bootstrap 2 min read How to create a navigation bar using React-Bootstrap? React-Bootstrap is a front-end framework that was designed with React in mind. The NavBar Component is a navigation header that is responsive and powerful. It supports navigation, branding, and many other related features. In this article, we are going to implement a navigation bar using React Boots 2 min read How to create a navbar in Bootstrap ? Bootstrap Navbar is a navigation header that is located at the top of the webpage which can be extended or collapsed, depending on the screen size. Bootstrap Navbar is used to create responsive navigation for our website. We can create standard navigation bar with <nav class="navbar navbar-defaul 2 min read How to make a Bootstrap Modal Popup in Angular 9/8 ? In this article, we will see how to use the modal popup component of bootstrap in the Angular application. The addition of bootstrap in our Angular project is an easy process. The modal dialog box can be used to restrict the user to perform particular actions before they return to their normal use o 3 min read How to determine active route in AngularJS ? In this article, we will see how to determine the active route in AngularJS, along with understanding the basic implementation through the example. Approach: To determine which is the active route at any moment in AngularJS this can be achieved by using $on() & $location.path() method. An event 2 min read Like