Custom CSS Bootstrap Is Not Applied

Question

My custom CSS file is not overriding the bootstrap.min.css unless I use !important tag in the class

This will change the color of my background header

.bg-grey{
    background-color:#333 !important;
}

While this won't

.bg-grey{
    background-color:#333;
}

Any idea why this is happening because I've put the external sheet right in the same directory?

Answer 1

Usually this happens because your bootstrap.min.css is being parsed after your custom file. What order are you including the css files in your head? You should be sure that your custom file is being included after your bootstrap file.

Answer 2

Using !important is considered to be acceptable for utility/helper classes, and Bootstrap's authors have chosen to use !important on all of the Bootstrap 4 Utility classes .

The background color utility classes ( bg-* ) use !important , so you must use !important for any custom color overrides to take precedence.

However, bg-grey isn't a color that's included in Bootstrap 4. If you're defining a custom color, make sure the overrides follow any previous CSS definition of bg-grey.