Panels

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

Basic design

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example 
					


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

Options

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 title

Panel content 
					


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

Wrap buttons or secondary text in .panel-footer.

Panel content
Panel footer
					


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

Panel with tables

To take advantage of full width palce the table directly under the .panel wraper and not in .panel-body.

Panel title

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 @tho
3 Larry the Bird @twitter 
					


<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel title
        </h3>
    </div>
    // Default panel contents
    <div class="panel-body">
        <p>Some default panel content here.</p>
    </div>

    // Table
    <table class="table">
        Table content
        ...
    </table>
</div>

Panel with list groups

Include full-width list groups within any panel.

Panel title

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">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel title
        </h3>
    </div>
    // Default panel contents
    <div class="panel-body">
        <p>Some default panel content here.</p>
    </div>

    // List group
    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Vestibulum at eros</li>
        ...
    </ul>
</div>