My own css does not override bootstrap css

Question

I dont know why is my custom css file not overwritting the bootstrap css. I know about the cascade and the fact that my new css class attribute must have higher priority that bootstraps but somehow I am missing the point as how exactly to override it. This is the code:

<nav class="navbar navbar-expand-lg navbar-light bg-light">

If I change the bg_light to bg_red it will change the background to red, but if I try to define it in external cs using only that it won't do anything.

and my css file line is:

nav.bg-light {
    background-color: red;
}

I have also tried to put all the classes there:

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    background-color: red;
}

but it still does not change my color. What am I missing? I am trying to learn how to override the bootstrap css to be able to customize it. Thanks for help.

Answer 1

CSS is all about the cascading logic so make sure you load your CSS AFTER you've loaded bootstrap : ex:

 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/style.css">

if the problem continues, then it's most probably because the bootstrap class was defined with an !important property, in this case you should add !important to yours as well

nav.bg-light {
    background-color: red !important;
}

Answer 2

.bg-light is a utilitty from Bootstrap to make background color light, and it's property in CSS is defined with !important . So, you couldn't override this without too use !important in your CSS.