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
Bootstrap Panel 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.
See this 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.