Bootstrap Panels

In this section, we will discuss Bootstrap panels, which are components inserted into the DOM.

To get a basic panel, you only need to add the .panel and .panel-default classes to a <div> element.

Here is an example:

<div class="panel panel-default">
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>

View Example Online

The above example displays as follows:

Panel Title

You can add panel titles in two ways:

• Using the .panel-heading class to easily add a heading container to your panel.
• Using <h1> to <h6> elements with the .panel-title class for a pre-styled heading.

The following example demonstrates both methods:

<div class="panel panel-default">
   <div class="panel-heading">
      Panel heading without title
   </div>
   <div class="panel-body">
      Panel content
   </div>
</div>

<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
         Panel With title
      </h3>
   </div>
   <div class="panel-body">
      Panel content
   </div>
</div>

View Example Online

The above example displays as follows:

Panel Footer

You can add a footer to your panel by simply adding the .panel-footer class to a <div> element. Here is an example:

<div class="panel panel-default">
   <div class="panel-body">
      This is a Basic panel
   </div>
   <div class="panel-footer">Panel footer</div>
</div>

View Example Online

The above example displays as follows:

Note that the panel footer does not inherit colors from meaningful substitutions because it is not part of the preceding content.

Panels with Alert Colors

You can set panels with alert colors using the classes .panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger. Here is an example:

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">Panel title</h3>
   </div>
   <div class="panel-body">
      This is a Basic panel
   </div>
</div>

View Example Online

The above example displays as follows: This is a Basic panel </div> </div> <div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> This is a Basic panel </div> </div> ```

View example online

The above example displays as follows: