Bootstrap Nav Bar Active

Question

I use navbar from bootstrap, but whenever I click on one of the page names, navbar does not select it to show that I am on this page. For example, if I'm on the main page, then the navigation bar looks like this:

However, if I click on About , I will go to the About page, but the navbar will still look like this:

How do I select it on a page? Thanks

Answer 1

Read the documentation . You need to apply class="active" to the li element that you want to be active. It is not processed automatically. You need to implement it as you see fit.

It could be a jQuery solution or a server side solution. Any of these may be more or less suitable depending on how you build your website.

Answer 2

I use MVC4, Razor and Bootstrap and ended up using coderwall.com solution ( https://coderwall.com/p/hwtkng )

 <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Home") { @Html.AttributeEncode("class=active");}> @Html.ActionLink("Home", "Index", "Home") </li>