Bootstrap Panels

This chapter will explain Bootstrap Panels. The panel component is used to insert DOM components into a box. To create a basic panel, simply add the class .panel and class .panel-default to a <div> element, as shown in the example below:

Example

<div class="panel panel-default">
    <div class="panel-body">
        This is a basic panel
    </div>
</div>

The result is as follows:

Panel Titles

We can add panel titles in two ways:

• Using the .panel-heading class, you can easily add a title container to the panel.

• Using <h1> to <h6> with the .panel-title class to add a title with predefined styles.

The following example demonstrates these two methods:

Example

<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 heading with title
        </h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

The result is as follows:

Panel Footer

We can add a footer to the panel by placing a button or secondary text inside a <div> with the class .panel-footer. The following example demonstrates this:

Example

<div class="panel panel-default">
    <div class="panel-body">
        This is a basic panel
    </div>
    <div class="panel-footer">Panel footer</div>
</div>

The result is as follows:

Contextual Panel Colors

Use contextual state classes .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger to set contextual panel colors, as shown in the example below:

Example

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
</div>

Panel with Table

To create a borderless table within a panel, we can use the class .table inside the panel. If there is a <div> containing .panel-body, we can add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, the component will transition seamlessly from the panel header to the table.

The following example demonstrates this:

Example

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel Title</h3>
    </div>
    <div class="panel-body">
        This is a basic panel
    </div>
    <table class="table">
        <th>Product</th><th>Price</th>
        <tr><td>Product A</td><td>200</td></tr>
        <tr><td>Product B</td><td>400</td></tr>
    </table>
</div>
<div class="panel panel-default">
    <div class="panel-heading">Panel Title</div>
    <table class="table">
        <th>Product</th><th>Price</th>
        <tr><td>Product A</td><td>200</td></tr>
        <tr><td>Product B</td><td>400</td></tr>
    </table>
</div>

Panel with List Group

We can include a list group in any panel by adding the .panel and .panel-default classes to the <div> element to create the panel and adding the list group inside the panel. You can learn how to create list groups from the List Group chapter.

Example

<div class="panel panel-default">
    <div class="panel-heading">Panel Title</div>
    <div class="panel-body">
        <p>This is a basic panel content. This is a basic panel content.
            This is a basic panel content. This is a basic panel content.
            This is a basic panel content. This is a basic panel content.
            This is a basic panel content. This is a basic panel content.
        </p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Free Domain Registration</li>
        <li class="list-group-item">Free Window Space Hosting</li>
        <li class="list-group-item">Number of Images</li>
        <li class="list-group-item">24*7 Support</li>
        <li class="list-group-item">Annual Renewal Cost</li>
    </ul>
</div>