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

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

Panel with footer

Wrap buttons or secondary text in .panel-footer.

Panel content

Panel footer

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

Panel with list groups

Include full-width list groups within any panel.

Panel title

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

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


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


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


// Panel with table
<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
<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>