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
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
<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.
You can also add panel footers by using the
You can add any of the contextual classes to panels.
Panels with Tables
Non-bordered tables with the
.table class applied integrate seamlessly into panels.
If there is also a
.panel-body class before or after the table, a border will be added to that side of the table.
Panels with List Groups
Bootstrap list groups also integrate seamlessly into panels.
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.