'Bootstrap get priority over my CSS - with correct implementation order

I've linked bootstrap's css file first.
I've linked my css file second.

css implementation order

Why does bootstrap gets priority over my css??
I've played with the file order, there is no "important" setting on the bs rules.
I haven't found any related issue... please help. thanks.

enter image description here

htmlcsstwitter-bootstrapbootstrap-4


Solution 1:[1]

In this situation, bootstrap's code is more specific (has 2 classes, while yours has only one specified).

Take a look at this MDN page for more information

You can override bootstrap by being more specific or using '!important' in your css rule (be aware that usually !important is not to be preferred, higher specificity is more flexible and easy to further override or change)

color: #C77358 !important;

Solution 2:[2]

You can try adding another class to the navbar element, and styling it in your css file instead of using .navbar-brand.

Solution 3:[3]

when you create your custom css use id instead of class becuse id has more priority then class so bootstrap use class and you use id then your custom css has more priority then bootstrap class

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman
Solution 3 Khatri Raja

Related Questions