CODEWITHSUNDEEP
csstwitter-bootstrap
SBB
SBB

Reputation: 8970

Legacy Bootstrap with Panels CSS Issue

I am using Panels that were introduced in Bootstrap 3 with the legacy version of Twitter-Bootstrap.

I am trying to apply a class well to the panel body but when I do, it has a lot of padding around it. When I do this in BS3, it looks fine so I think I may have missed some code.

Here is an example of my issue: http://www.bootply.com/Wnp50MNE23

enter image description here

<div class="panel panel-success">
 <div class="panel-heading">
<span class="panel-title">Panel Title</span>
</div>
  <div class="panel-body well">
    Panel content
  </div>
</div>


.panel {
    padding: 15px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }

  .panel-heading {
    padding: 10px 15px;
    margin: -15px -15px 15px;
    font-size: 17.5px;
    font-weight: 500;      
    background-color: #f5f5f5;
    border-bottom: 1px solid #dddddd;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
  }

This is my goal, which is working fine with BS3 by default: enter image description here

Upvotes: 0

Views: 70

Answers (1)

vanburen
vanburen

Reputation: 21663

Here's what happens with .panel CSS from v3.3.5 added with the entire CSS for v2.3.2. I think this is what you're trying to do.

.panel {
    margin-bottom:20px;
    background-color:#fff;
    border:1px solid transparent;
    border-radius:4px;
    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .05);
    box-shadow:0 1px 1px rgba(0, 0, 0, .05)
}
.panel-body {
    padding:15px
}
.panel-heading {
    padding:10px 15px;
    border-bottom:1px solid transparent;
    border-top-left-radius:3px;
    border-top-right-radius:3px
}
.panel-heading>.dropdown .dropdown-toggle {
    color:inherit
}
.panel-title {
    margin-top:0;
    margin-bottom:0;
    font-size:16px;
    color:inherit
}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
    color:inherit
}
.panel-footer {
    padding:10px 15px;
    background-color:#f5f5f5;
    border-top:1px solid #ddd;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px
}
.panel-success {
    border-color:#d6e9c6
}
.panel-success>.panel-heading {
    color:#3c763d;
    background-color:#dff0d8;
    border-color:#d6e9c6
}
.panel-success>.panel-heading+.panel-collapse>.panel-body {
    border-top-color:#d6e9c6
}
.panel-success>.panel-heading .badge {
    color:#dff0d8;
    background-color:#3c763d
}
.panel-success>.panel-footer+.panel-collapse>.panel-body {
    border-bottom-color:#d6e9c6
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="panel panel-success">
    <div class="panel-heading">
<span class="panel-title">Panel Title</span>

    </div>
    <div class="panel-body well">Panel content</div>
</div>

Upvotes: 1

Related Questions