Bootstrap Panels

This tutorial is about Bootstrap Panels. While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic example

To make a basic panel, simply apply class .panel to the <div> tag. Also add class .panel-default to this element as you can see in the following example:

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

Demo

Panel with heading

You can easily add a heading container to you panel with two ways:

• First use class .panel-heading to easily add a heading container to your panel.


• Second use any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

This example show the both ways:

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

Demo

Panel with footer

By wrapping buttons or secondary text in a <div> with this class .panel-footer you can add footer to panels. Below mentioned example will show you.

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

Demo

Note: Panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel Contextual alternatives

By adding any of the contextual state classes (.panel-primary, .panel-success, .panel-info, .panel-warning and .panel-danger) you can make a panel more meaningful to a particular context just like other components.

<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>

Demo

Panel with tables

To use any non-bordered table inside the panel use this .table class for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Following example demonstrates this:

<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 Heading</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>

Demo

Panel with Listgroups

Everyone easily can include list groups within any panel by following these steps.

• Make a panel by using .panel class to the <div> tag.


• Also assign .panel-default class to this tag.

Now inside this panel inserts your list groups. How to create List groups, you can learn to create a list group from tutorial List Groups.

<div class="panel panel-default">
 <div class="panel-heading">Panel heading</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.
 </p>
 </div>
 <ul class="list-group">
 <li class="list-group-item">Free Domain Name 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">Renewal cost per year</li>
 </ul>
</div>

Demo

Bootstrap Panels