To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set 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.
Below example implements the above approach:
Example: This example explain how to set bootstrap navbar active class with AngularJS using ng-controller.
- How to design full width dropdown Navbar using Bootstrap ?
- How to align navbar items to the right in Bootstrap 4 ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to Align navbar logo to the left screen using Bootstrap ?
- Creating Navbar | Vanilla HTML CSS Vs Bootstrap
- How to change font color in dropdown navbar when collapsed in bootstrap ?
- How to add active class on click event in custom list group in Bootstrap 4 ?
- Include Bootstrap in AngularJS using ng-bootstrap
- How to set active tab style with AngularJS?
- How to determine active route in AngularJS ?
- How to remove active nav-tab when click outside of nav-tab in Bootstrap ?
- How to change font color of the active nav-item in Bootstrap ?
- How to set sticky navbar only for first section of page?
- How to create an Affix or sticky Navbar ?
- How to create Animated Blur Navbar using CSS?
- How to add <li> class to active and leave it after hover using jQuery ?
- Difference between Bootstrap and AngularJS
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.