Bootstrap-Panel

  Bootstrap Panel  

 In this post, we are learning about Bootstrap Panel. In previous post I wrote about what is Bootstrap?, How to setup Bootstrap?, Bootstrap Grid System, Bootstrap Container Class , Bootstrap Nested column and Bootstrap Offset Columns.

 In Bootstrap panels are box-like components that are used to place HTML components. We might want to display a box with rounded corners and a light-colored border around it. This is the component we should use in such cases.Here’s an example panel:

 Code 

<div class="panel panel-default">
 <div class="panel-body">
  Basic panel example
 </div>
</div>

  This produces the following result in the browser:

 Output 

1) Panel with heading :

 We can easily add a heading container to our panel with .panel-heading. There are two ways to add panel heading:
     Use .panel-heading class to easily add a heading container to our panel.
     Use any <h1> -<h6> with a .panel-title class to add a pre-styled heading.

 Following example demonstrates both the ways:

 Code 

<div class="container">
 <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>
</div>

  This produces the following result in the browser:

 Output 

2) Panel with footer :

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

 Code 

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

  This produces the following result in the browser:

 Output 

3) Panel with Contextual state: :

 We can used contextual state classes to make a panel more meaningful to a particular context.

 Panels contextual state classes also come in different colors:

Sr.No	Class	Description
1)	.panel-success	used for a green color
2)	.panel-primary	used for a dark blue color
3)	.panel-info	used for a light blue color
4)	.panel-warning	used for a yellow color
5)	.panel-danger	used for a red color

 Code 

<div class="container">
<div class="panel panel-success ">
	<div class="panel-heading">
	   Panel Header
	</div>
	<div class="panel-body">
		Panel Body
	</div>
</div>
<div class="panel panel-primary ">
	<div class="panel-heading">
		Panel Header
	</div>
	<div class="panel-body">
		Panel Body
	</div>
</div>
<div class="panel panel-warning ">
	<div class="panel-heading">
		Panel Header
	</div>
	<div class="panel-body">
		Panel Body
	</div>
</div>
</div>

  This produces the following result in the browser:

 Output 

4) Panels with Tables :

 we can add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

 Code 

 <div class="container">
<div class="panel panel-success ">
 <div class="panel-heading">
  Panels with Tables
 </div>
 <div class="panel-body">
  Panel Body
 </div>
 <table class="table table-striped">
  <thead>
  	<tr>
  	 <th>Country</th>
  	 <th>Currency</th>
  	 <th>Code</th>
  	</tr>
  </thead>
  <tbody>
  	<tr>
  	 <td>India</td>
  	 <td>Indian rupee</td>
  	 <td>INR</td>
  	</tr>
  	<tr>
  	 <td>Japan</td>
  	 <td>Japanese yen</td>
  	 <td>JPY</td>
  	</tr>
  	<tr>
  	 <td>Australia</td>
  	 <td>Australian dollar</td>
  	 <td>AUD</td>
  	</tr>
  </tbody>
 </table>
</div>
</div>

  This produces the following result in the browser:

 Output 

5) Panel with Listgroups :

 We 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 our list groups.

 Code 

<div class="container">
 <div class="panel panel-success ">
  <div class="panel-heading">
   Panels with Listgroups
  </div>
  <div class="panel-body">
   Panel Body
  </div>
  <!-- List group -->
  <ul class="list-group">
   <li class="list-group-item">Panel with heading</li>
   <li class="list-group-item">Panel with footer</li>
   <li class="list-group-item">Panels Contextual Alternatives</li>
   <li class="list-group-item">Panels with Tables</li>
   <li class="list-group-item">Panel with Listgroups</li>
  </ul>
 </div>
</div>

  This produces the following result in the browser:

 Output