Do I have a “Group” field in bootstrap

Question

In one of my applications, we need a group block function, as shown in the figure below. We use Twitter Bootstrap 3 css. I searched if there was any feature in Bootstrap 3, but could not find any, I don’t know if I was missing any while I created my own CSS to create such a structure, but it didn’t seem to be very good.

Can someone please tell me a component as it is 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

Answer 1

You can try the bootstrap panels: 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

panel-primary .

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

Answer 2

Bootstrap:

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

Answer 3

The basic bootstrap examples have something almost like this. http://getbootstrap.com/examples/theme/

They call them "panels." Here is 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>

Answer 4

In Bootstrap 4, the panel has been replaced by a map. See Migrating to V4. Panel on .card

Full details here: Bootstraps maps