2

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
user3472360
  • 1,337
  • 1
  • 16
  • 29
  • 1
    Are you loading your CSS before or after Bootstrap? You might also need to increase the specificity of your selector, and avoid using `!important` whenever you can – j08691 Mar 20 '20 at 15:00
  • add a parent for example .parent .bg-dark{} or many parents .parent1 .parent2 .bg-dark{} – Ziad Darwich Mar 20 '20 at 15:25
  • Does this answer your question? [What does !important mean in CSS?](https://stackoverflow.com/questions/9245353/what-does-important-mean-in-css) – miken32 Mar 20 '20 at 15:47

3 Answers3

0

Dont use same class which is already defined. Use the user define class and set the color

Sandeep Karanam
  • 70
  • 7
0

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

does_not_compute
  • 476
  • 1
  • 7
  • 20
0

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!

KolemanPa
  • 48
  • 7