Using Bootstrap CSS. Have an issue - I change my class name and it no longer works

Question

I have a Bootstrap CSS style:

.navbar-inverse .navbar-nav > li > a.active {
   color: #428bca;
    background-color: #e7e7e7;
 }

I have the MVC 5 HTML as:

<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new {
 @class = "active" })</li>

The CSS performs perfectly.

I change the class name from "active" to "xyz" or anything for that matter and it does not work any longer. I do the change in both places, the HTML and CSS.

When I do an inspect, the rule no longer appears as it does when the class name is "active".

Why?

It's an MVC app and it is valid. It works fine when I name the class - "active". — user3020047, Oct 11 '17 at 23:27
Your two styles (`color` and `background`) only apply when the element has class `active`. That's what `.active` means in your stylesheet. — Jim Cote, Oct 11 '17 at 23:28
I know...but now I want to change the name from active to something else and it no longer works. It should as it's just a class name. — user3020047, Oct 11 '17 at 23:30
Then you should update the tags on your question to reflect that. — j08691, Oct 11 '17 at 23:30

score 0 · Answer 1 · answered Oct 11 '17 at 23:30

0

Your css rule says that the element must have the classname active and be an a element, inside an li element inside an navbar-nav class named element.

So when you change the classname target to something else, the rule does no longer apply

answered Oct 11 '17 at 23:30

But I do change it in BOTH places. I think the reply regarding that I am using Bootstrap might be the problem. – user3020047 Oct 11 '17 at 23:37

score 0 · Accepted Answer · answered Oct 11 '17 at 23:30

0

You are using bootstrap for your navigation bar and in that case there is some predefined classes which has been styled by css. So you cannot put any random class.

For other classes you can refer: https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

answered Oct 11 '17 at 23:30

abhishekrn

79
8

So if I am using Bootstrap, i can't use custom class names? I need custom class names as I have 3 links and can't name all of them "active". They need to be unique. – user3020047 Oct 11 '17 at 23:41
you can use custom class name but you need to define those classes in your css file – abhishekrn Oct 11 '17 at 23:48
you can also use concept of multiple class like one defined in bootstrap and other one in your css file like – abhishekrn Oct 11 '17 at 23:55
2nd comment: That is what I was doing. I changed "active" to "xyz" in the both the CSS file and the HTML. But it did not work. – user3020047 Oct 11 '17 at 23:58
I just now tried using Ids and it works. In the HTML I changed class to id and the CSS too and it works. .navbar-inverse .navbar-nav > li > #movielink { color: #428bca !important; background-color: #e7e7e7 !important; }
@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { id = "homelink" })

user3020047

Oct 12 '17 at 00:00

I did: .navbar-inverse .navbar-nav > li > a.xyz{ color: #428bca; background-color: #e7e7e7; } – user3020047 Oct 12 '17 at 00:01

And...the HTML:

@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "xyz" })

– user3020047 Oct 12 '17 at 00:02

Using Bootstrap CSS. Have an issue - I change my class name and it no longer works

2 Answers2