Bootstrap customization in Codepen

I am trying to customize Bootstrap (color and background color), which works when I use Brackets but does not work in Codepen (I have tried it in JSFiddle and I get the same result). Bootstrap itself works, as does jQuery. I am using CDNs embdedded in the html, if that matters.
This is the codepen. Background color of the navbar should be darkred.

So the problem basically is the the Specificity principle of CSS.

One of the point is that the last declaration rules over all the previous declaration if the declaration are same.

In codepen you have linked the cdn to bootstrap and others within the head tag and and i guess the CSS that you write comes before all that and the bootstrap properties rules over all that.

Codepen has a different place to add such links in the settings just as you added for your javascript.

So add all those links in the css settings and it will work.

Else if you continue doing the same you have to add the attribute !important after every property which is not recommended.

Thanks, that did it.

1 Like