Panels

Need to put some content in a box with a border and padding? Use the panel class to do it.

Basic panel

EXAMPLE

Basic panel component with panel-default modifer, and no panel header.

<div class="panel panel-default">
 <div class="panel-body">
  …
 </div>
</div>

Panel With Heading

EXAMPLE

Basic Panel Heading

Basic panel component with panel-default modifer, and a panel header.

<div class="panel panel-default">
 <div class="panel-title">
   …
 </div>
 <div class="panel-body">
  …
 </div>
</div>

Panel Modifiers

Assign panel modifiers to give some styling to the panels.

EXAMPLE

Primary Heading

Primary body.

Success Heading

Success body.

Info Heading

Info body.

Warning Heading

Warning body.

Danger Heading

Danger body.

Danger Button

<div class="panel panel-primary">
 <div class="panel-title">
   Primary Heading
 </div>
 <div class="panel-body">
  Primary body.
 </div>
</div>

<div class="panel panel-success"> … </div>

<div class="panel panel-info"> … </div>

<div class="panel panel-warning"> … </div>

<div class="panel panel-danger">
 <div class="panel-title">
   Danger Heading
 </div>
 <div class="panel-body">
  Danger body.
  <p><a href="#" class="btn btn-sm btn-danger"></p>
 </div>
</div>