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