Bootstrap Panels

Bootstrap Panels are used to display content inside bordered boxes with headings and footers.

Important Note:
Panels are deprecated in Bootstrap 4 and replaced by cards.

Panels

A panel in Bootstrap consists of a container with a border, padding, and an optional heading and footer.

Example for basic panel:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Output:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Panel Heading

The panel-heading class is used to add a title to the panel.

For example:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class="panel-body">Panel Content</div>
</div>

Output:

Panel Footer

The panel-footer class is used to add a footer at the bottom of the panel.

For example:

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Output:

Panel Group

Panel Groups allow multiple panels to be grouped together for better organization.

Example:

<div class="panel-group">
  <div class="panel panel-primary">
    <div class="panel-heading">First Panel</div>
    <div class="panel-body">Content</div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">Second Panel</div>
    <div class="panel-body">Content</div>
  </div>
</div>

Output:

Important Note:
Panel groups are useful for organizing multiple related content sections within a webpage.

Panels with Contextual Classes

You can use contextual classes like panel-primary, panel-success, panel-info, panel-warning, and panel-danger to change the panel’s appearance.

Request more information

Bootstrap Panels