Do we have any Group box in bootstrap

Alex Man picture Alex Man · Apr 17, 2015 · Viewed 26.5k times · Source

In one of my application we need a group box like feature just like as shown in the picture below, We are using Twitter Bootstrap 3 css. I have searched whether there is any feature like that in Bootstrap 3 but couldn't find any, I don't know whether I am missing any, for the time been I have created my own css for creating a structure like that, but seems not that good.

Can anyone please tell me any component like this available in Bootstrap 3

CSS

table {
    border-collapse:separate;
    border:solid #2e6da4 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {

    border-left:solid #2e6da4 1px;
    border-top:solid #2e6da4 1px;
}

th {
    background-color: #337ab7;
    border-top: none;
}

td:first-child {
     border-left: none;
}

JSFiddle

enter image description here

Answer

G.L.P picture G.L.P · Apr 17, 2015

You can try panels from bootstrap: Demo

HTML:

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blahblah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah <br/>blah
  </div>
</div>

Yes you can: Demo

Use panel-primary for Blue color. For more info Reference Link

<div class="panel panel-default">...</div>
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>