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.

<div class="panel panel-default">
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>

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.

<div class="panel panel-default">
<div class="panel-heading">
With normal text
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">With '<a href="#application.urlroot#/html/tags/html_h1_tag.cfm">h1</a>' Element &amp; 'panel-title' Class</h1>
</div>
<div class="panel-body">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
</div>
</div>

Panel Footers

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

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

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.

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Heading</h1>
</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>

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.

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Primary</h1>
</div>

<ul class="list-group">
<li class="list-group-item">These Boots Are Made For Walking</li>
<li class="list-group-item">Eleanor, Put Your Boots On</li>
<li class="list-group-item">Puss 'n' Boots</li>
<li class="list-group-item">Die With Your Boots On</li>
<li class="list-group-item">Fairies Wear Boots</li>
</ul>

</div>

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.