Skip to main content

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>