html - How to change color of navbar-inverse (Bootstrap)


Keywords:html 


Question: 

I've got a simple question which is giving me a hard time. I am creating a navbar using Bootstrap and i am trying to change its color but I can't.

jsp

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">

css

navbar-inverse {
background-color:whatever;
     }

Am I doing anything wrong in css?


3 Answers: 

Here is what the default for navbar-inverse is:

.navbar-inverse {
     background-color: #222;
     border-color: #080808;
}

Which of course is dark, not the color you want.

So instead of using an !important on your custom rule, you COULD go search for this rule in the bootstrap css.

Barring that, place an !important on your custom rule and it should override.

 

navbar-inverse is a class so, you can call it by adding ' . ' before the name of the class

.navnavbar-inverse {
    background-color:whatever !important;
}

an !important on your custom rule override any other rule of your custom CSS, and now everything should work fine.

 

I always avoid the use of !important as it can create problems in later part of your project. Assign an id to your element and style it. So, I normally go with the below mentioned way---

#nav_bar {
background-color: red;
border-color: red;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="">
          <script src=""></script>
          <script src=""></script>
           <link rel="stylesheet" href="">
           
           </head>
           <body>
           <nav id="nav_bar" class="navbar navbar-inverse navbar-static-top" role="navigation"></nav>

           </body>
           </html>