How to use bootstrap 4 panels

Introduction

A panel is a box used to call attention to a web page. It can hold absolutely anything inside of it, so it just depends on what we wish for it to display.

A panel has three major parts:

• Panel heading: This holds the title of the panel.
• Panel body: This holds the content of the panel.
• Panel footer: This holds more details about the panel.

How to use

A panel can be created with these four classes:

• .panel
• .panel-heading
• .panel-body
• .panel-footer

A container ( div ) with the class .panel is used as the parent.

Three containers with the other three classes each are the children’s containers. Each holds the content which they are meant to hold.

<div>

<div></div>
 <div></div>
 <div></div>

</div>

Panel-group and contextual classes

Panel-group

A panel-group is a group of many panels. It can be created by wrapping many panels inside a parent container with the class .panel-group.

<div>

<div id="panel1">
<div></div>
 <div></div>
 <div></div></div>

<div id="panel2>
<div></div>
 <div></div>
 <div></div>
</div>

</div>

Contextual classes

Contextual classes are mainly used to add color to our panel. They are commonly used on the container with class .panel, which automatically adds color to the panel-heading. They include:

• panel-default: Adds no color to the panel.
• panel-success: Adds a green color to the panel.
• panel-primary: Adds blue color to the panel.

Example

Let’s look at the example below:

Explanation

• Line 6: We create a div with class panel-group. This container holds all the children’s panels as a group.
• Line 8: We create a div with classes panel and panel-primary. This sets up our panel and automatically adds blue color to the header.
• Line 9: We create a div with class panel-heading. It holds the panel header.
• Line 10: We create a div with class panel-body. It holds the panel content.
• Line 11: We create a div with class panel-footer. It holds the panel footer.
• Lines 14 to 18: We create the second panel exactly like the first panel but with a class panel-danger, which gives it a different color.
• Lines 20 to 24: We create the third panel exactly like the first panel but with a class panel-info, which gives it a different color.
• Line 25: We have the end of our panel group.