css - Bootstrap: Change background-color of panel



I found some previous posts about this, but the mistakes of the ones I saw were obvious to me, and unfortunately I couldn't find an answer to my problem yet.

I'm using a primary panel of bootstap:

<div class="panel panel-primary">...</div>

I want to change the background-color of the heading, so I add this class to my CSS to change the background-color:

.panel-primary > .panel-heading {
    color: yellow !important;
    background-color: yellow !important;
    border-color: #F6E3CE !important;

The background-color of the heading, however, just keeps it's blue. What irritates me about this is that the color (font color) changes to yellow, which shows me that I'm editing the right CSS block.
And I can change the background-color of the panel-body just the same way which works fine also.

Any ideas about this?

Here's a screenshot to see that it's only the background-color that won't change: background-color won't change

3 Answers: 

You need to use background-image or background property to override the default background color.

like this

    background-image: -webkit-linear-gradient(top,yellow 0, #dbff46 100%);



you need to be more specific with your code, you didnt mention how your elements are structured, the A > B selector means that it will match the element B that has an element A parent. To help you more with your question maybe add some code snippet so you can get help.


Sorry, I'm very new to stackoverflow. It seems that I have to add a new comment to post another screenshot.

Now this is really strange, when I identify the source of the file "gradients.less" in chrome, I get this Screenshot.enter image description here

According to this picture, I have a directory ../bootstrap/css/less/mixins/gradients.less

But actually the directory that I have is: ../bootstrap/css and there are only files in this, like "bootstrap.css" - no subfolder "less" - no subfolders at all.