Bootstrap 3 Panels

Provides a box with padding and a border. Optional headings and footers.

In Bootstrap, panels are boxes with padding and a border with rounded corners.

To create a basic panel, apply the .panel class with one of the .panel-* contextual classes to a <div> element.

Panel Headings

You can optionally add a heading box to the panel.

To do this, nest another <div> with a class of .panel-heading inside the .panel outer container.

You can use normal text or you can place the heading text inside a <h1> - <h6> element with the .panel-title class applied. This will ensure that the applicable Bootstrap styles are applied to the heading. This will also style any links consistently with the rest of the heading.

Panel Footers

You can also add panel footers by using the .panel-footer class.

Contextual Classes

You can add any of the contextual classes to panels.

<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title">Primary</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

<div class="panel panel-success">
<div class="panel-heading">
<h1 class="panel-title">Success</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

<div class="panel panel-info">
<div class="panel-heading">
<h1 class="panel-title">Info</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

<div class="panel panel-warning">
<div class="panel-heading">
<h1 class="panel-title">Warning</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

<div class="panel panel-danger">
<div class="panel-heading">
<h1 class="panel-title">Danger</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

Panels with Tables

Non-bordered tables with the .table class applied integrate seamlessly into panels.

With the `.panel-body` Class

If there is also a .panel-body class before or after the table, a border will be added to that side of the table.

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Heading</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>


<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>

</div>

Panels with List Groups

Bootstrap list groups also integrate seamlessly into panels.

Discontinued Component

Bootstrap 4 is discontinuing wells, thumbnails, and panels in favor of cards, which will do nearly everything wells, thumbnails, and panels did, only better.

Bootstrap 4 is in alpha release at the time of writing.