1. HOME
  2. Kitchen Sink
  3. Panels

Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel heading without title
Panel content

Panel title

Panel content 

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

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

Contextual alternative

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content 

  <div class="panel panel-primary">...</div>

With tables

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

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

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