CODEWITHSUNDEEP
csstwitter-bootstrap
14wml
14wml

Reputation: 4166

How to get rid of grey line at bottom of Bootstrap panel heading?

Problem

I have these panels, which I have successfully changed the colors of: enter image description here

But when I expand the panels, there is a thin grey border at the bottom of each panel header:

enter image description here enter image description here

How can I get rid of that sliver of grey?

My Code

CSS

.panel-wrong{
    border-color: #FED0D3;
}
.panel-wrong > .panel-heading{
    background: #FED0D3;
    color: #F53240;
    border-color: #FED0D3;
}

.panel-right{
    border-color: #E5FFFB;
}

.panel-right > .panel-heading{
    background: #E5FFFB;
    color: #02C8A7;
    border-color: #E5FFFB;
}

HTML

<div class="panel-group" id="accordion">
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
                            </h4> </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-wrong">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4> </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">panel body 2</div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-right">
                        <div class="panel-heading">
                            <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4> </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">panel body 3</div>
                        </div>
                    </div>
                </div>

JSFiddle

Upvotes: 0

Views: 1368

Answers (3)

JT91
JT91

Reputation: 45

.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body {
border-top: medium none;
}

Upvotes: 0

macjules
macjules

Reputation: 1

The particular property that you are hunting for is the border-top-color property of the .panel-body selector. By changing it's value to transparent you should remove that, thus:

.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: transparent;
}

Upvotes: -1

max
max

Reputation: 8687

.panel-group .panel-heading + .panel-collapse > .panel-body {
  border: none;
}

JSFIDDLE

Upvotes: 3

Related Questions