Bootstrap Panels

Bootstrap Panels

This chapter will discuss about Bootstrap panels. Panel component are used when you want to put your DOM component in a box. 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">

      This is a Basic panel

   </div>

</div>

Panel 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-titleclass to add a pre-styled heading.

Following example demonstrates both the 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>

Panel with footer

You can add footers to panels, by wrapping buttons or secondary text in a <div> containing class .panel-footer. Following example demonstrates this.

<div class="panel panel-default">

   <div class="panel-body">

      This is a Basic panel

   </div>

   <div class="panel-footer">Panel footer</div>

</div>

 

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

Use contextual state classes panel-primary, panel-success, panel-info, panel-warning, panel-danger, to make a panel more meaningful to a particular context.

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

To get a non-bordered table within a panel, use class .table within the panel. Suppose there is a <div> containing .panel-body, we add an extra border to the top of the table for separation. If there is no <div> containing .panel-body, then the component moves from panel header to table without interruption.

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>

Panel with Listgroups

You can include list groups within any panel. Create a panel by adding class .panel to the <div> element. Also add class .panel-default to this element. Now within this panel include your list groups. You can learn to create a list group from chapter 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 panelcontent.This is a Basic panel content.

         This is a Basic panelcontent.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>