How come bootstrap is overwriting my css body?

Question

Ever since I updated to Bootstrap 4 it's updated my body and overwritten it so that the background is always white.

I have tried setting a class to be more specific, still doesn't work. Can someone help?

:

Answer 1

Since your CSS file is no more specific than the Bootstrap styles, it all depends on the order that the styles appear in your HTML.

So, you could either re-order the style files, or (and I think this option is better) use a class on your body to set the background color.

When using the class, make sure your style looks like this:

body.class-name{

}

That will be more specific than body.

Bootstrap has many (customizable) color classes built in. If you're compiling the SCSS files yourself, you can also use the included color variables to make your own styles.

In fact, if you just set the $body-color variable before compiling your bootstrap CSS file, you won't have to write any styles.

For more customization options. check the documentation.

Answer 2

Please reorder the link tags for bootstrap and your own css

e.g

<link ..... href="css/bootstrap.min.css"....></link>
<link ..... href="css/styleIndex.css"....></link>

then your style will overwrite the default bootstrap style