How to use Bootstrap panel

Panel style is one of the styles that can be used in many situations, such as sidebar of blog, bulletin board of enterprise website, column list and so on.

In addition to the content, there is also a panel header to add a title. Let's take a look at how to use Bootstrap panel style through this article.

Bootstrap Panel Basic Style

It is also very easy to call the panel style directly, and you only need the following code:

<div class="panel panel-default">
 <div class="panel-body">
  Basic panel example
 </div>
</div>

This style contains only the content part of the panel style, without adding a header, and is suitable for panel content without a header.

Bootstrap panel with title style

The panel style mentioned above has no title, which is not enough in some cases, so Bootstrap panel also provides panel style with title. Let's see how to use it:

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

The first part of the code above is the most standard panel structure with titles. In order to adapt to reading devices and SEO search engine optimization elements, it is best to put the titles in the tags of h1-h5.

Bootstrap panel with footnote style

If the text explaining the class can't be well displayed in the panel title, it can be explained in the form of footnotes. The Bootstrap panel also provides footnotes:

<div class="panel panel-default">
 <div class="panel-body">
   Panel content 
 </div>
 <div class="panel-footer"> Panel footnote </div>
</div>

Choosing titles or footnotes through primary and secondary relations is the key to making good use of panel components.

Meaningful Styles for Bootstrap Panel

Like other Bootstrap components 1, Bootstrap panel styles also have meaningful styles. By referring to these styles, the function of the panel can be visually displayed, which are also the colors and style names:

<div class="panel panel-primary"> Main panel styles </div>
<div class="panel panel-success"> Success panel style </div>
<div class="panel panel-info"> Information panel style </div>
<div class="panel panel-warning"> Warning panel style </div>
<div class="panel panel-danger"> Hazard panel style </div>

Bootstrap panel combined with table

If you need to introduce table style into the panel, it can also be easily implemented:

<div class="panel panel-default">
 <div class="panel-heading"> Panel title </div>
 <table class="table">
  Table content 
 </table>
</div>

Bootstrap panel combined with list

As mentioned at the beginning of 1, if you want to introduce a list into the panel, it is perfect, and it can be easily achieved with the following code:

<div class="panel panel-default">
 <div class="panel-heading"> Panel title </div>
 <div class="panel-body">
  <p> Introduction to Panel Content </p>
 </div>
 <ul class="list-group">
  <li class="list-group-item"> List item 1</li>
  <li class="list-group-item"> List item 2</li>
  <li class="list-group-item"> List item 3</li>
  <li class="list-group-item"> List item 4</li>
  <li class="list-group-item"> List item 5</li>
 </ul>
</div>