Panels

Basic example

<div class="panel">
  <div class="body">
    Basic panel example
  </div>
</div>

Panel with heading

<div class="panel">
  <div class="heading">Panel heading without title</div>
  <div class="body">Panel content</div>
</div>

<div class="panel">
  <div class="heading">
    <h3>Panel title</h3>
  </div>
  <div class="body">Panel content</div>
</div>

Panel with footer

<div class="panel">
  <div class="body">Panel content</div>
  <div class="footer">Panel footer</div>
</div>

Contextual alternatives

<div class="panel primary">...</div>
<div class="panel success">...</div>
<div class="panel info">...</div>
<div class="panel warning">...</div>
<div class="panel danger">...</div>

With tables

<div class="panel">
  <!-- Default panel contents -->
  <div class="heading">Panel heading</div>
  <div class="body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

If there is no panel body, the component moves from panel header to table without interruption.

<div class="panel">
  <!-- Default panel contents -->
  <div class="heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

With list groups

<div class="panel">
  <!-- Default panel contents -->
  <div class="heading">Panel heading</div>
  <div class="body">
    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>

  <!-- List group -->
  <ul class="group">
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>