Bootstrap custom background-CodePudding

Im new to bootstrap and im getting this. So basically i want to change my background of a container using hover but i can't seem to get it right.

HTML <div ></div>

CSS
`.box:hover{

        background-color: red;   
                                 
        box-shadow: 5px 5px red; 
}`

at 1st i thought i might not be selecting it right then i am getting the shadow but the background still not changing.

Before Hover

After Hover

what i tried i skimmed through the official documentation and even read the answers to this article stackoverflow but im still stuck

any kind of help would be useful and thanks a bunch

CodePudding user response：

Having had a dig around the Bootstrap 5 css file and background colours are tagged as !important so that pretty much means most css rules won't work but we can increase the specificity a touch by using div.your-class and also use !important as in the following example:

.container {
  color: yellow;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  padding: 0.125rem;
}

.black {
  background-color: red !important;
}

/* we nudge the specificity of this rule up a smidge using div.classname so it now overrides the css rule in Bootstrap */
div.black-importanter {
  background-color: red !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class='container black bg-dark'>Nope!</div>
<div class='container black-importanter bg-dark'>Yay!</div>