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.

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.

Bootstrap Panel with Contextual Classes

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 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 .acive.

Output

This is the panel heading
This is the simple panel content inside the panel box.
  • Computer
  • Laptop
  • Mouse
  • Printer
  • Keyboard

Reference
Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.