Bootstrap Tutorial - Bootstrap Panels

Panels are used to display text or images within a box with rounded corners.

The panel component apply some border and padding around the content.

Here's how to create a panel:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head><!--  w  w  w.  jav a 2 s  .c  o  m-->
  <body style='margin:30px'>
    <div class="panel panel-default">
        <div class="panel-heading"> ATTENTION
        </div>
        <div class="panel-body">
            Lorem  <br/>ipsum  <br/>dolor  <br/>sit <br/>ametnim ...
        </div>
        <div class="panel-footer">
            <a href="#" class="btn btn-danger btn-sm">Agree</a>
            <a href="#" class="btn btn-default btn-sm">Decline</a>
        </div>
    </div>

  </body>
</html>

Click to view the demo

Note

The panel div has been divided into three parts: panel-head, panel-body, and panel-footer.

Each of these panel parts is optional.

Panels come with various color options. In the previous code, I've used the default color with the help of the panel-default class.

You can also use other classes for different colors:

panel-primary for dark blue
panel-success for green
panel-info for sky blue
panel-warning for yellow
panel-danger for red

Panels with Heading

We can also add a heading to panel with .panel-heading class.

<!--from  w  ww  . j  a va 2 s.  c  om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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-heading">This Page is Disabled</div>
        <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.<br> <a href="#">Click here</a> to enable the page.</div>
    </div>
</div>
</body>
</html>

Click to view the demo

Panels with H1-h6 Heading

We can include heading elements from <h1> to <h6> with a .panel-title class.

<!--from  w  w w. j a v a 2  s.  c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Panels with Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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-heading">
            <h1 class="panel-title">Panel Title</h1>
        </div>
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.</div>
    </div>
</div>
</body>
</html>

Click to view the demo

Panels with Footer

We can add footer section to panels using the .panel-footer class. The panel's footer can wrap buttons or secondary text.

<!-- ww w  . ja  va2  s  . c o  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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">This page is temporarily disabled by the site administrator for some reason.</div> 
        <div class="panel-footer clearfix">
            <div class="pull-right">
                <a href="#" class="btn btn-primary">Learn More</a>
                <a href="#" class="btn btn-default">Go Back</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Click to view the demo

Panels with Contextual States

We can add contextual state classes like .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger to the panel components.

<!--   w ww. jav  a 2 s .co  m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">301 Moved Permanently</h3>
        </div>
        <div class="panel-body">The requested page has been permanently moved to a new location.</div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">200 OK</h3>
        </div>
        <div class="panel-body">The server successfully processed the request.</div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">100 Continue</h3>
        </div>
        <div class="panel-body">The client should continue with its request.</div>
    </div>
    <div class="panel panel-warning">
        <div class="panel-heading">
            <h3 class="panel-title">400 Bad Request</h3>
        </div>
        <div class="panel-body">The request cannot be fulfilled due to bad syntax.</div>
    </div>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">503 Service Unavailable</h3>
        </div>
        <div class="panel-body">The server is temporarily unable to handle the request.</div>
    </div>
</div>
</body>
</html>

Click to view the demo

Tables inside Panels

We can add any non-bordered table within a panel to create more informative tables.

<!-- w  w  w .  j a va 2s .com-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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">
    <!-- Default panel contents -->
    <div class="panel-heading">User Information</div>
    <div class="panel-body">
      <p>The following table contains some personal information about users.</p>
    </div>
    <!-- Table -->
    <table class="table">
      <thead>
        <tr>
          <th>Row</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>TOM</td>
          <td>Smith</td>
          <td>a@mail.com</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jack</td>
          <td>Smith</td>
          <td>b@mail.com</td>
        </tr>
        <tr>
          <td>3</td>
          <td>TOM</td>
          <td>Smith</td>
          <td>c@mail.com</td>
        </tr>
      </tbody> 
    </table>
  </div>
</div>
</body>
</html>

Click to view the demo

List Groups inside Panels

The following code shows how to include full-width list groups within a panel.

<!--   ww w  .  j a  va2  s .c  om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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">
    <!-- Default panel contents -->
    <div class="panel-heading">Products</div>
    <div class="panel-body">
      <p>The following products are currently available on our store.</p>
    </div>
    <!-- List group -->
    <div class="list-group">
      <a href="#" class="list-group-item">Java<span class="badge">50</span>
      </a>
      <a href="#" class="list-group-item">Javascript <span class="badge">145</span>
      </a>
      <a href="#" class="list-group-item">CSS<span class="badge">30</span>
      </a>  
      <a href="#" class="list-group-item">HTML5<span class="badge">65</span>
      </a>
      <a href="#" class="list-group-item">SQL<span class="badge">8</span>
      </a>
    </div>
  </div>
</div>
</body>
</html>

Click to view the demo