Bootstrap - Panels
This chapter will discuss about Bootstrap panels.
Panel components 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-title class
to add a pre-styled heading.
The 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. The
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 such as, 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 the
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.
The 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">
<tr>
<th>Product</th>
<th>Price
</th>
</tr>
<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">
<tr>
<th>Product</th>
<th>Price
</th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
Panel with List groups
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 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>