CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SBB
SBB

Reputation: 8970

Removing a CSS Border from Bootstrap Panel

I have a bootstrap panel that I am using in BS 2.3.

When a panel contains content, I want to show the normal 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 are just left with the gray bar in the header.

Here is a fiddle of what I am 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 the final result on panels I choose; not all of them: enter image description here

Upvotes: 4

Views: 34701

Answers (4)

Bojan
Bojan

Reputation: 986

default class in bootstrap goes:

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

just remove the default panel class in your div.

Upvotes: 1

AlexG
AlexG

Reputation: 5919

remove the border (and box-shadow) of .panel and change the border-bottom of .panel-heading to border

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

2nd solution: now add noborder to panel

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

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

Upvotes: 8

user4663515
user4663515

Reputation: 11

panel

<!-- 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);
}

Upvotes: 1

Blunderfest
Blunderfest

Reputation: 1854

You can override the bootstrap styles and put the border on the body. This will get rid of the body border when there isn't a border and keep it when there is a body. The provided answer 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;
}

Upvotes: 0

Related Questions