Introduction Writing Guidelines Colors & Icons Javascript Forms Grid Blankslate Avatars Buttons Alerts Modals Tooltips Panels Popovers Tables Navigation Utilities & Markdown Miscellaneous

# Panels

Panels are composed of 3 parts: `.panel-heading`, `.panel-body` and `.panel-footer`.

### Title

Body of the panel

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="panel-body">
            Body of the panel
        </div>
        <div class="panel-footer">
            Optional footer of the panel
        </div>
    </div>

The panel heading can contains a toolbar:

### Title

Item 1 Item 2 Item 3

    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="btn-toolbar panel-toolbar">
                <button class="btn">My Button</button>
                <button class="btn btn-text-link">Text Button</button>
            </div>
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="list-group">
            <a href="#" class="list-group-item">Item 1</a>
            <a href="#" class="list-group-item active">Item 2</a>
            <a href="#" class="list-group-item">Item 3</a>
        </div>
    </div>

Panels can also include a `.list-group`.

### Title

Item 1 Item 2 Item 3

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="list-group">
            <a href="#" class="list-group-item">Item 1</a>
            <a href="#" class="list-group-item active">Item 2</a>
            <a href="#" class="list-group-item">Item 3</a>
        </div>
    </div>

And have different styles:

### Title

Body of the panel

### Title

Body of the panel

### Title

Body of the panel

### Title

Body of the panel

    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="panel-body">
            Body of the panel
        </div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="panel-body">
            Body of the panel
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="panel-body">
            Body of the panel
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">Title</h3>
        </div>
        <div class="panel-body">
            Body of the panel
        </div>
    </div>

Include a table in a panel:

Title
Body

# | Title | ID | Updated
--- | --- | --- | ---
1 | PHP | php | 1 month ago
2 | Javascript | js | 1 month ago

    <div class="panel panel-default">
        <div class="panel-heading">
            <b>Title</b>
        </div>
        <div class="panel-body">
            Body
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>ID</th>
                    <th>Updated</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>PHP</td>
                    <td>php</td>
                    <td>1 month ago</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Javascript</td>
                    <td>js</td>
                    <td>1 month ago</td>
                </tr>
            </tbody>
        </table>
    </div>