Do we have any Group box in bootstrap

Question

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

You can just use col-md-3 4 times in a row to have 4 'groupboxes' — Sven van den Boogaart, Apr 17 '15 at 11:48
@K.B.M yes exactly ...but can we have other colors for the title — Alex Man, Apr 17 '15 at 11:50
@AlexMan You can always customize the colors using CSS to override the default, or use the standard color schemes built-in to bootstrap. Take a peek at the examples that come with bootstrap when you download it. — Ian M, Apr 17 '15 at 12:00

score 8 · Accepted Answer · answered Apr 17 '15 at 11:50

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>

Panels is the way to go !! – Alexander Solonik Apr 17 '15 at 12:18 — Alexander Solonik, Apr 17 '15 at 12:18

score 2 · Answer 2 · answered Apr 17 '15 at 11:55

Use panels from Bootstrap: Demo

<div class="col-lg-3 col-md-3 col-sm-3">
    <div class="panel panel-primary">
        <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>
</div>

score 2 · Answer 3 · answered Aug 16 '19 at 11:30

2

In Bootstrap 4, panel has been replaced by card. See Migrating to V4 .panel to .card

Full info here: Bootstrap’s cards

answered Aug 16 '19 at 11:30

Jon Roberts

2,262
2
13
17

score 1 · Answer 4 · answered Apr 17 '15 at 11:52

There is something almost exactly this in the base bootstrap examples. http://getbootstrap.com/examples/theme/

They call them "panels" Here's the code:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
        <div class="panel-body">
             Panel content
        </div>
</div>

Do we have any Group box in bootstrap

4 Answers4