Bootstrap Panel

Learn how to create a panel using bootstrap and put your content inside the block box. Add heading in the Bootstrap panel in the different formats using the contextual classes. Learn each section given with examples.

Here is a simple example of Bootstrap Panel:-

Test it Live

This is the simple panel content inside the panel box.

Create Basic Bootstrap Panel

To create a simple panel using the bootstrap, you have to put all your content inside the <div> element with two class .panel and .panel-default. Inside this div, you can add your panel body content using the class .panel-body.

See the example below to create your own panels.

Output

This is the simple panel content inside the panel box.

Bootstrap Panel with Heading

You can add heading inside the panels with the content body as given in the above example. To add a heading, you have to use the class .panel-heading as the class of the heading inside the panels.

In the below example, there is a heading and the body content inside the panels.

Output

Panel Heading

This is the simple panel content inside the panel body.

You can also add the title of the panel using the class .panel-title in the class .panel-heading.

Output

Panel Title

This is the simple panel content inside the panel body.

Panel With Footer

In addition to the headings and body content, you can also add panel footer using the class .panel-footer. Add the class below the panel body content. The footer display with some light background looking same as the header color.

Output

This is the simple panel content inside the panel box.

This is Panel Footer

Contextual Classes in Bootstrap Panel

Contextual classes are the useful classes to display the panel in different border colors and heading colors. In addition to the default panel, you can use 5 contextual classes given in the table below with the descriptions.

Class Name	Description
.panel-primary	Use this class to display the primary content using the panels.
.panel-success	Specify this class to display the success messages in the panels
.panel-info	You can use this class to display the informational messages using the panels
.panel-warning	Display warning messages using this class as the class of the panels.
.panel-danger	Create an error message box using this class in the panels.

See each panel with the examples given below for each different types of classes. I have added the default panels in the below example because default panel also contains the look and feel for panels.

Output

default Heading

Default panel content inside the default panel box.

Primary Heading

Primary panel content inside the primary panel box.

Success Heading

Success panel content inside the success panel box.

Info Heading

Information panel content inside the info panel box.

Warning Heading

Warning panel content inside the warning panel box.

Error Heading

Error panel content inside the error panel box.

Most of all classes are useful in creating different types of messages for your websites.

Table Inside Panel

You can also add tables in the panels by adding it after the body content of the panel. There are a different way of adding a table inside the panels. So, let’s learn each one with the examples given below.

Table inside Panel With Panel Body

If you add the body content of the panel, it will come between the panel heading and the table. Use the class .table as the class of the table to put it inside the panels. However, you can add any table classes to the panel table content.

Output

This is the panel heading

This is the simple panel content inside the panel box.

Cricket Name	Score
Murali Vijay	87
Chris Gayle	96*
Andrew Russel	187

Table inside Panel Without Panel Body

If you do not add the panel body content in the panels, the table will come just after the panel heading.

Output

This is the panel heading

Cricket Name	Score
Murali Vijay	87
Chris Gayle	96*
Andrew Russel	187

Add List Group Inside the Bootstrap Panel

Add your list group item inside the panels as given in the example below. The first element of the list group item is active using the class .active.

Output

This is the panel heading

This is the simple panel content inside the panel box.

• Computer
• Laptop
• Mouse
• Printer
• Keyboard