Bootstrap Panels

This chapter will explain Bootstrap panels. The panel component is used to insert DOM components into a box. To create a basic panel, simply add the class to the <div> element.paneland class.panel-defaultand that's it, as shown in the example below:

The result is as follows:

Panel Title

We can add panel titles in two ways:

• Using.panel-headingthe class can easily add a title container to the panel.
• Using.panel-titlethe <h1>-<h6> with class to add a title with predefined styles.

The following example demonstrates these two ways:

The result is as follows:

Panel Footer

We can add a footer to the panel by placing a button or secondary text in a <div> with class.panel-footerin the <div> and that's it. The following example demonstrates this:

The result is as follows:

The panel footer does not inherit colors and borders from the contextual panel because it is not in the foreground content.

Panels with Contextual Colors

Use the contextual state classespanel-primary、panel-success、panel-info、panel-warning、panel-danger, to set panels with contextual colors. Examples are as follows:

The result is as follows:

Panels with Tables

To create a borderless table in a panel, we can use the class in the panel.table. Suppose there is a <div> containing.panel-body, we can add an extra border to the top of the table to separate it. If there is no containing.panel-body<div>, then the component will move uninterrupted from the panel header to the table.

The following example demonstrates this:

The result is as follows:

Panels with List Groups

We can include a list group in any panel by adding to the <div> element.paneland.panel-defaultthe class to create the panel, and add a list group to the panel. You can from theList Groupschapter to learn how to create list groups.

The results are as follows: