Bootstrap 3 Panel

Bootstrap 3 Panel is use to create a group of contents with bordered box and some padding. Panels are created with the .panel class, and content inside the panel has a .panel-body class.

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

Panel Heading

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

Panel Footer

<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 Group

To group many panels together, use '.panel-group' in a div. The .panel-group class clears the bottom-margin of each panel.

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

Panel with Contextual Classes

You can also use panel contextual classes: .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger

<div class="panel panel-primary">
  <div class="panel-heading">Panel with panel-primary class</div>
  <div class="panel-body">Panel Content</div>
</div>

<div class="panel panel-success">
  <div class="panel-heading">Panel with panel-success class</div>
  <div class="panel-body">Panel Content</div>
</div>