Change background color div

There are some cases that even using! important, the new application does not work. They are cases like:

Another class using! important:

In this case just check the class layout, for example, wrapper row-offcanvas row-offcanvas-left , the last style application will be of the last class, so if you have:

- bootstrap.css

.wrapper{
    color: #ffffff;
}

.row-offcanvas-left{
    color: #000000; //está cor será aplicada
}

But if the class wrapper has !important it will be applied. And if both classes have !important to row-offcanvas-left will be applied. But assuming your row-offcanvas-left class is using the important but is not working.

File Call Application:

If you have a style.css file and another bootstrap.css file, when this file is called it also changes the result. For example, if you have the row-offcanvas-left class in the two files, the file that is called last will be the applied style:

--- index.html

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css"> //arquivo que sera aplicado o estilo

--- index.html

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.css">//arquivo que sera aplicado o estilo

This is due to the way the .html and .css files are interpreted by the browser. Like reading a book from left to right, from top to bottom.

Add a new class in your div eg <div class="background"> And in the CSS code do so.

<style>
  .background{ background-color: blue; }
  // Caso não funcione adicione o !important no final do css
</style>