Change background color for browser 5.0

Question

in html:

<div class="navbar navbar-default"> 

in variable.less file:

 @navbar-default-bg: #f8f8f8; 

After changing this hexadecimal color to another color (i.e. blue), you will notice that only the color of the lower edge changes to blue. because the navbar class also has a background, it blocks the color @ navbar-default-bg.

Example:

1.in html:

 <div class="navbar navbar-default"> 

in .less variable:

@ navbar-default-bg: blue;

Exit

2.in html:

 <div class="navbar navbar-default"> 

in .less variable:

@ navbar-default-bg: blue;

in custom.css:

.navbar {background: blue}

Exit

I know that if I create my own css file and put .navbar{background: blue} , it will change the color of the navigator to what I want.

But I prefer to edit fewer files. is there any way to do this? Try it for the first time before thinking that this is a duplicate question!

Answer 1

Try removing the default bootstrap-theme.css and bootstrap-theme.min.css files from your project, as I think they override some of the styles in the main bootstrap.css files.

Answer 2

I think your question is still repeating itself. I think your conclusion above is wrong. When I install @ navbar-default-bg: blue; (in .less variables) and restores css (Bootstrap). <div class="navbar navbar-default"> will give me a blue navigator like:

The .navbar class .navbar not set the background color, and it does not affect the default background color of your class in the navigation bar.

For the moment, you always need to add a second class to .navbar (e.g. navbar-default, navbar-inverse or navbar-custom) to style the navigation bar. See Also: https://github.com/twbs/bootstrap/issues/10332

After installing @navbar-default-bg: blue; and recompiling the css bootstrap for .navbar-default will look like this:

 .navbar-default { background-color: #0000ff; border-color: #0000de; } .navbar-default .navbar-brand { color: #777777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; } .navbar-default .navbar-text { color: #777777; } .navbar-default .navbar-nav > li > a { color: #777777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555555; background-color: #0000de; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { color: #cccccc; background-color: transparent; } .navbar-default .navbar-toggle { border-color: #dddddd; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #dddddd; } .navbar-default .navbar-toggle .icon-bar { background-color: #cccccc; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #0000de; } .navbar-default .navbar-nav > .dropdown > a:hover .caret, .navbar-default .navbar-nav > .dropdown > a:focus .caret { border-top-color: #333333; border-bottom-color: #333333; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555555; background-color: #0000de; } .navbar-default .navbar-nav > .open > a .caret, .navbar-default .navbar-nav > .open > a:hover .caret, .navbar-default .navbar-nav > .open > a:focus .caret { border-top-color: #555555; border-bottom-color: #555555; } .navbar-default .navbar-nav > .dropdown > a .caret { border-top-color: #777777; border-bottom-color: #777777; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333333; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555555; background-color: #0000de; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #cccccc; background-color: transparent; } } .navbar-default .navbar-link { color: #777777; } .navbar-default .navbar-link:hover { color: #333333; } 

Note blue will be set to #0000FF;