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>
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>
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>
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>
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>
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>
The above examples show the effect of the following: