Bootstrapの色の追加をしたい

Question

目標

Bootstrapのパネルの色を自分で用意した色を適用したい。

状況

bootstrap3.3.7を使用してます。
パネルを使って一覧表示しているのですが、元から用意されている色(primary等、、)だけじゃ足りないため色を追加したいのですがどうすればよいでしょうか？

試した事

追加でクラスを付与してbackground-colorを指定したりしてみたが変化しなかった。

<div class="panel panel-default">
   <div class="panel-heading panel-heading-custom">
       <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
       Panel content
   </div>
</div>

.panel-default > .panel-heading-custom {
background: #ff0000; color: #fff; }

参考サイト
https://www.it-swarm.dev/ja/css/bootstrap%E3%81%AEpanel%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AE%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%A9%E3%82%A4%E3%83%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/1049178981/

Comments

[退会済みユーザー]

実際に試してみたコード（これでうまくいくはずだ、とren0826nosukeさんが考え、試したコード）を質問文に記載してはいかがでしょうか。

[ren0826nosuke]

アドバイスありがとうございます！
試してみたコードと参考にしたサイトを追記してみました！

Answer 1

!important 規則を用いることで質問者さんの抱えている問題は解決すると思います (動作確認用リンク)。

.panel-default > .panel-heading-custom {
    background: #ff0000 !important;
    color: #fff !important;
}