CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Diego Rios
Diego Rios

Reputation: 505

How to override bootstrap panel-heading color

I know there are many questions like mine. However none of them are working. I have this html file:

<div class="container col-md-6 col-md-offset-3">
<div class="panel-group">
     <div class="panel panel-default">

        <div class="panel-heading-custom panel-heading ">Username</div>
        <div class="panel-body panel-info">{{ main.username }}</div>

     </div>
</div>

and this css file:

.panel-default > .panel-heading-custom {
    color: #333;
    background: black;
    border-color: #ddd;
 }

i've tried many options:

.panel-heading .panel-default > .panel-heading .panel-default.panel-heading .panel.panel-heading

And a couple more. I know you can us !important, but I don't think that's the right way to do it. Could you please help me with that?

This is what appears on my browser:

enter image description here Thanks!

Upvotes: 0

Views: 4511

Answers (1)

Geeky
Geeky

Reputation: 7498

I guess your styles are being overridden. You can make sure that your styles to be not overridden either by

  1. using !important
  2. you can write the style as to have highest specificity
  3. if there are two/more styles defined for a particular class or a selector, what ever comes last will come to effect

check this snippet 

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.panel-default>.panel-heading-custom {
    color: #333;
    background: black;
    border-color: #ddd;
 }
</style>

<div class="container col-md-6 col-md-offset-3">
<div class="panel-group">
     <div class="panel panel-default">

        <div class="panel-heading-custom panel-heading heading ">Username</div>
        <div class="panel-body panel-info">{{ main.username }}</div>

     </div>
</div>

Hope this helps

Upvotes: 2

Related Questions