Bootstrap Panel Example

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 - Simple Example

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:

  1. .panel-primary
  2. .panel-success
  3. .panel-info
  4. .panel-warning
  5. .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>

 

 

 

Bootstrap Panel Examples

 

Bootstrap Panel Example Bootstrap Panel Example Bootstrap Panel Example Bootstrap Panel Example

If you want, you can learn more about Bootstrap Panels and other components here.

Sharing is caring!

Pavel Malos

Creating Digital Experiences @ BootstrapBay