Bootstrap Panel Tutorial

What is a Bootstrap Panel?

In this post I will present to you the Bootstrap panels. These components are used when you want to put your DOM component in a box. To get a basic panel, just add class .panel to the <div> element.

A Bootstrap panel is a bordered box that has padding around it.

The class for this is .panel and the content inside it is .panel-body

Update for Bootstrap 4 Beta

Changelog – Panels, thumbnails, and wells

Dropped entirely for the new card component.

Panels

1. .panel to .card, now built with flexbox.
2. .panel-default removed and no replacement.
3. .panel-group removed and no replacement. .card-group is not a replacement, it is different.
4. .panel-heading to .card-header
5. .panel-title to .card-title. Depending on the desired look, you may also want to use heading elements or classes (https://mdbootstrap.com/content/typography/#headings) (e.g. <h3>, .h3) or bold elements or classes (e.g. <strong>, <b>, .font-weight-bold (https://mdbootstrap.com/utilities/typography/#font-weight-and-italics)). Note that .card-title, while similarly named, produces a different look than .panel-title.
6. .panel-body to .card-body
7. .panel-footer to .card-footer
8. .panel-primary to .card-primary and .card-inverse (or use .bg-primary on .card-header)
9. .panel-success to .card-success and .card-inverse (or use .bg-success on .card-header)
10. .panel-info to .card-info and .card-inverse (or use .bg-info on .card-header)
11. .panel-warning to .card-warning and .card-inverse (or use .bg-warning on .card-header)
12. .panel-danger to .card-danger and .card-inverse (or use .bg-danger on .card-header)

Simple Example

<div class="panel panel-default">
  <div class="panel-body">A Simple Panel</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Panels</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-default">
        <div class="panel-body">I am a simple bootstrap panel example</div>
    </div>
</div>
</body>
</html>

The Output:

Bootstrap Panel Heading

You can simply add the .panel-heading class.

<div class="panel panel-default">
  <div class="panel-heading">Bootstrap Panel Heading</div>
  <div class="panel-body">Bootstrap Panel Body</div>
</div>

Panel Footer

Class is .panel-footer

<div class="panel panel-default">
  <div class="panel-body">Panel Content</div>
  <div class="panel-footer">Panel Footer</div>
</div>

Panel Group

If you want to group panels together, use <div> as a wrap with class .panel-group around it.

Observation: The .panel-group clears the bottom-margin of each panel.

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-body">Panel Content</div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">Panel Body</div>
  </div>
</div>

Contextual Classes

You can add contextual classes like:

.panel-primary
.panel-success
.panel-info
.panel-warning
.panel-danger

Panel with Tables

To create a non-boredered table with a panel, use the class .table within it.

<div class = "panel panel-default">
   <div class = "panel-heading">
      <h3 class = "panel-title">Panel title</h3>
   </div>
   
   <div class = "panel-body">
      This is a Basic panel
   </div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
   
</div>

<div class = "panel panel-default">
   <div class = "panel-heading">Panel Heading</div>
   
   <table class = "table">
      <tr>
         <th>Product</th>
         <th>Price </th>
      </tr>
      
      <tr>
         <td>Product A</td>
         <td>200</td>
      </tr>
      
      <tr>
         <td>Product B</td>
         <td>400</td>
      </tr>
   </table>
   
</div>

Panel with List groups

Inside of any panel, you can include list groups. Just add it inside the <div> element of your .panel.

<!DOCTYPE html>
<html>
<head>
   <title>Try v1.2 Bootstrap Online</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class = "panel panel-default">
   <div class ="panel-heading">Panel heading</div>
   
   <div class = "panel-body">
      <p>This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content. This is a Basic panel content.
         This is a Basic panel content.</p>
   </div>
   
   <ul class = "list-group">
      <li class = "list-group-item">Free Domain Name Registration</li>
      <li class = "list-group-item">Free Window Space hosting</li>
      <li class = "list-group-item">Number of Images</li>
      <li class = "list-group-item">24*7 support</li>
      <li class = "list-group-item">Renewal cost per year</li>
   </ul>

</div>

</body>
</html>