Bootstrap background color doesn't work

help
1

Hey there,

i downloaded the standard button-clicker-app with the command “meteor create simple-todos”. I didn’t change anything except that I inserted bootstrap and changed the background color in the file “main.css” to “darkslategrey”.

When I start the app I don’t see the background. The css file seems to work because the standard padding is displayed.

So does someone know why the backgroundcolor doesnt work?

Changes in the main.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Changes in the main.css:

body {
  background-color: darkslategrey;
  padding: 10px;
  font-family: sans-serif;
}

Thanks for your Time!

2

Maybe you have an element the size of body that has it’s own background-color defined? Why don’t you use the DOM inspector of your browser to see what’s really going on?

3

It seems that the background-color is predefined by bootstrap. It comes from the “https://stackpath.bootstrapcdn.com/bootstrap/scss/_reboot.scss”. According to that i have to disable that definition.

Thanks for your help!

PS: I just had to add an “!important”. So it should look like:

background-color: darkslategrey !important;
4

alternatively, make sure your css loads after bootstrap. The last rules get higher priority than earlier rules. This will save you a lot of !importants and the headaches that come with them

5

It works for me, as it is the only “!important”, that i needed.
I don’t really know how to load the css after bootstrap, because meteor does is for you so you cannot influence the loading order. If there is a way i don’t know it.

6

Man, you nailed! It works here!