Bootstrap navbar background color not changing

Question

I am using the bootstrap navbar for my website. If I want to change the background color of the navbar I can do it using:

<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation" >

    <div class="container-fluid" style="background-color:#000000">

       <p>hi</p>

    </div>

</nav>

But if I try to use css in an external sheet using either

.nav_backcolor {
   background-color:#000000;
}

or overiding the bootstrap classes in my stylesheet using

.navbar-default {

background-color:#000000;

}

and adding the class like

<!-- Navbar -->
<nav class="navbar navbar-default nav_backcolor" role="navigation" >

<div class="container-fluid">

   <p>hi</p>

</div>

</nav>

it doesn't work. Any help please?

Answer 1

I believe Bootstrap uses the background image for linear-gradient which was causing an issue, try just setting only the main background attribute:

.navbar-default {
  background: #000000;
}

Answer 2

Try adding "!important" when adding the class to your CSS like this

.navbar-default {
    background: #000 !important;
}

Answer 3

As the comments say, the html and css itself is fine.

The page you linked can't find your style sheet file. Fix the url to your css file and you should be fine.

UPDATE: Seeing that it still has problems you can remove the Bootstrap theme to make it easier for yourself. If you're gonna do a lot of styling you might be better off removing the theme entirely so that you don't have to override it for every small change.