Removing CSS Border from Bootstrap Panel

Question

I have a bootstrap panel that I use in BS 2.3.

When a panel contains content, I want to show a regular panel with its border, etc. However, when there is no content in the body, I want to apply a class to it that removes the border around the panel body, so that you just stay with a gray bar in the header.

Here is a script of what I'm trying to do: http://jsfiddle.net/xwh0ca7c/

<div class="panel">
  <div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i>&nbsp;&nbsp;My Training Projects</span></div>
  <div class="panel-body">
      I do not want this border around the "Body" of this panel, just the heading. Really, when I remove the body div, I dont understand why the border is still there to begin with. I need a custom class that will allow me to not show the border / around the panel body
  </div>

CSS:

.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;
}

.panel-footer {
  padding: 10px 15px;
  margin: 15px -15px -15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
} 

.panel-primary {
  border-color: #428bca;
}

.panel-primary .panel-heading {
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}
/* This kinda of works but I only want to apply it to specific panels, not all
.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
    border: none;
}
*/

Here is a screenshot of how I want to get the final result in the panels that I select; not all of them:

Answer 1

remove the border (and window shadow) .paneland change the lower border .panel-headingto the border

http://jsfiddle.net/xwh0ca7c/1/

---

: noborder panel

.panel.noborder {
    border: none;
    box-shadow: none;
}
.panel.noborder > .panel-heading {
    border: 1px solid #dddddd;
    border-radius: 0;
}

http://jsfiddle.net/xwh0ca7c/2/

Answer 2

<!-- Test Panel -->
<div class="panel panel-empty">
      <div class="panel-heading"> <span class="panel-title"><i class="icon-list-alt"></i>&nbsp;&nbsp;My Training Projects</span></div>
</div>

CSS

.panel-empty{
    padding-left:15px;
    padding-right:15px;
    padding-top:0px;
    padding-bottom:0px;
    border:0px;
    -webkit-box-shadow: 0 ;
     box-shadow: 0 ;
}

.panel-empty .panel-heading{
    border: 1px solid #dddddd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

Answer 3

bootstrap :

.panel {
  margin-bottom: 20px;
  background-color: #ffffff;
  border: 1px solid transparent;
  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);
}

div.

Answer 4

You can override bootstrap styles and place the frame on the body. This will allow you to get rid of the border of the body when there is no border and save it when there is a body. The answer provided so far always removes the border. Fiddle

.panel{
  border:none;
  padding:0;
}
.panel-heading{
  border:1px solid #ccc;
  padding:10px;
  margin:0;
}
.panel-body{
  border:1px solid #ccc;
  padding:10px;
  border-top:0;
}