< Bootstrap Tutorial

Bootstrap panels

← Previous Next →


Bootstrap Panels

Sometimes we might require to place our content in box for better presentation. In such situation the Bootstrap panel component can be very useful. In most basic form the panel component applies some border and padding around the content.

To get a basic panel, just add class .panel to the <div> element. Also add class .panel-default to this element as shown in the following example:

<div class="panel panel-default">
    <div class="panel-body">Look, I'm in a panel!</div>
</div>

The panel created will look like this:

Panels with Heading

There are two ways to add panel heading:

  • Use .panel-heading class to easily add a heading container to your panel.
  • Use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Both the above methods are demonstrated below:

Using .panel-heading:

<div class="panel panel-default">
    <div class="panel-heading">This Page is Disabled</div>
    <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.<br> <a href="#">Click here</a> to enable the page.</div>
</div>

Using .panel-title:

<div class="panel panel-default">
    <div class="panel-heading">
        <h1 class="panel-title">Panel Title</h1>
    </div>
    <div class="panel-body">Panel content…</div>
</div>

The output produced will look like this:

Panels with Footer

We can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer.

The following code shows how to do this:

<div class="panel panel-default">
    <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div> 
    <div class="panel-footer clearfix">
        <div class="pull-right">
            <a href="#" class="btn btn-primary">Learn More</a>
            <a href="#" class="btn btn-default">Go Back</a>
        </div>
    </div>
</div>

The output produced will look like this:

Panels with Contextual states

We can use contextual state classes such as, panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.

The following example demonstrates how to work with all these classes:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">301 Moved Permanently</h3>
    </div>
    <div class="panel-body">The requested page has been permanently moved to a new location.</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">200 OK</h3>
    </div>
    <div class="panel-body">The server successfully processed the request.</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">100 Continue</h3>
    </div>
    <div class="panel-body">The client should continue with its request.</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">400 Bad Request</h3>
    </div>
    <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">503 Service Unavailable</h3>
    </div>
    <div class="panel-body">The server is temporarily unable to handle the request.</div>
</div>

The result looks like this:

 
← Previous Next →