Bootstrap panel

This chapter we will discuss Bootstrap panels, panel assembly for insertion into a DOM component.

You just need to get the base panel and add.panel .panel-defaultclass to the <div> element.

It is shown below:

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

View online examples

The above examples show the effect of the following:

Panel title

We are two great ways to add a panel title:

• Use.panel-heading class can simply add a title to your container panel
• Use <h1> - <h6> elements and uses.panel-title your class to add a pre-style header.

The following examples demonstrate two different approaches:

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

View online examples

The above examples show the effect of the following:

Panel Footnote

You can add footnotes in the panel, you only need to add.panel-footer in the <div> element.Examples are as follows:

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

View online examples

The above examples show the effect of the following:

Note that the panel will not inherit color from footnote with meaningful alternative, because it is not in front of the content.

Warning panel with color

You can use the panel-primary, panel-success, panel-info, panel-warning, panel-danger classes to set up panel with warning colors. Examples are as follows:

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

View online examples

The above examples show the effect of the following:

With a table panel

We can use .table class in the panel to set the table with no borders. You can define the text content of the total outside tables by .panel-body class. Examples are as follows:

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

View online examples

The above examples show the effect of the following:

With a list of groups of panel

We can be included in any list of the panel group by adding.panel and .panel-defaultclass in the <div> element to create the panel, and add the list in the panel, examples are as follows:

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

View online examples

The above examples show the effect of the following: