If you are using Bootstrap on a static website, you might have run into the problem of highlighting the active pages on the navbar.
Active pages are highlighted with the
Here is a sample of a Bootstrap Navbar:
Notice how the “Home” link is darker? In the code, you’ll see
li class="nav-item active" wrapping the “Home” link. That makes it nice and clear that visitors are on the homepage of your site.
The trouble is, nobody wants to hard-code a slightly different version of the Navbar on to each page of their website, especially if you are using a static site-builder like Jekyll.
active class to the link for the page we are on.
active is added.
Include this at the bottom of the page, after you’ve loaded jQuery. You can see a working example on this site.
Hat Tip: NinjaCSS