Bootstrap Panels

Bootstrap Panels : A Panel in bootstrap is basically a box with some styles like border , padding etc. Bootstrap provides predefined boxes which are known as panel. We often need to show data in box with some padding and border for this bootstrap panel component becomes very useful. Bootstrap panel component provides many types of panel. We are going to explain panels with example and demo.

Bootstrap Panels

Here is very basic panel –

  
Hi I Am Basic Panel

If you run the above example it will produce output like this –

Bootstrap Panel Heading

.panel-heading is used to add heading in panel.

  
My Heading
  
Hi I Am Basic Panel With Heading.

If you run the above example it will produce output like this –

Bootstrap Panel Footer

.panel-footer is used to add footer in panel.

  
My Heading
  
Hi I Am Basic Panel With Heading.
  
Read More

If you run the above example it will produce output like this –

Bootstrap Panel Group

You can make group of panels by adding a wrapper div with class .panel-group.
Here is an example of panel group-

  
My Heading 1
  
Hi I Am Basic Panel With Heading.
  
  

  
My Heading 2
  
Hi I Am Basic Panel With Heading.
  

The above example will produce following output-

Bootstrap Panels with Contextual Classes

Bootstrap provides contextual classes to add color in panels which represents different states.
Here are available classes for panel state –

• .panel-default – Represents Default States
• .panel-primary – Primary State
• .panel-success – Represents Success Message
• .panel-info – Represents Information
• .panel-warning – Represents Warning
• .panel-danger – Represents Error Message With Danger State

Let us have look on each state with example And demo-

Bootstrap Panel States

  
Panel with .panel-default class  
  
Hi I Am Basic Panel With Heading.
 


  
Panel with .panel-primary class 
  
Hi I Am Basic Panel With Heading.
  

  
Panel with .panel-success class 
  
Hi I Am Basic Panel With Heading.
  
 

  
Panel with .panel-info class  
  
Hi I Am Basic Panel With Heading.
  

  
Panel with .panel-warning class 
  
Hi I Am Basic Panel With Heading.
  
 

  
Panel with .panel-danger class  
  
Hi I Am Basic Panel With Heading.
  

The above example will produce following output-