Change twitter bootstrap 3.0 navbar class background color in less

Question

in html:

<div class="navbar navbar-default">

in variable.less file:

@navbar-default-bg: #f8f8f8;

After change this hex colour to other colour(ie. blue), you will notice that only bottom edge colour change to blue. because the class navbar has background too, it block the @navbar-default-bg colour.

Sample:

1.in html:

<div class="navbar navbar-default">

in variable.less:

@navbar-default-bg: blue;

Output:

2.in html:

<div class="navbar navbar-default">

in variable.less:

@navbar-default-bg: blue;

in custom.css:

.navbar{background: blue}

Output:

I know that if I make a custom css file and put .navbar{background: blue} it will change the navbar color to what I want.

But I prefer to edit less file. is there any way to do that? Try on your end first before you think 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 over-ride some of the styles in the main bootstrap.css files.