How to set transparent background for all bootstrap panels' bodies in my webapplication

Question

If I add style section like this:

<div class="panel panel-primary" style="background-color: rgba(245, 245, 245, 0);">

to my panel the background of the body is transparent. But I don't want to do copy-paste for every panel inside my application. I want them all to have transparent background.

I have tried to edit bootstrap.css in my project. I tried about 15 different places to put: background-color: rgba(245, 245, 245, 0); none of them worked.

This is my bootstrap.css file: http://wklej.org/hash/754afd00cfa/

Answer 1

Maybe solution is to override Bootstrap's CSS in separated file, named for example application.css :

.panel.panel-primary{
    background-color: rgba(245, 245, 245, 0);
}

You need to include this after bootstrap.css

Answer 2

I wouldn't recommend editing the bootstrap.css file directly. You can generate a custom bootstrap.css file along with a minified version at http://getbootstrap.com/customize/ . For any components you want transparent, enter in 'transparent' for their background color. For what you're describing, you'll want to change the @panel-bg variable under Panels.