Panels

Basic example

Basic panel example

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

Panel with heading

Panel heading without title

Panel content

Panel title

Panel content

<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

Panel content

Panel footer

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

Contextual alternatives

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

<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

Panel heading

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.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

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

With list groups

Panel heading

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.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

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