I'm trying to override the background colour that bootstrap uses for its "bg-dark" class. To do this i've imported in a separate CSS file with this in it:
.bg-dark {
background-color: black;
}
But this doesn't seem to change the background colour. If I do it like this instead though it does work:
.bg-dark {
background-color: black !important;
}
Why is this? And is there anyway of me doing it without having to resort to !important?
Dont use same class which is already defined. Use the user define class and set the color
The !important keyword means that rule with take priority over every other class no matter the order it was loaded. This is bad as it goes against the cascade ( I.E you can never overwrite this cleanly now )
You need to ensure your style sheet loads after bootstrap and you will be able to override successfully
Good Question,
The way CSS works are that the closer the style is to the element the more important it is, however, the !IMPORTANT tag overrides the other ones. For example if you were to write style="background-color:black" inside the element it would override the outside stylesheet setting the background color.
Hope this helps!