Bootstrap Panels

In Bootstrap, a panel is a bordered box with some padding around its element. The panel components are used when you want to put your DOM component in a box.

The class .panel is used within the <div> element to create Bootstrap panels. The content inside the panel has a .panel-body class.

Generally a panel contains three parts:

  • Panel header
  • Panel content
  • Panel footer

Example -

Bootstrap Panel Group

Panel group is used to groups many panel together.

For a panel group, you have to wrap a <div> with class .panel-group around them.

The .panel-group class clears the bottom-margin of each panel.

Example -

Bootstrap Panel with contextual classes

Contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger) are used to color the panels.

Example -