• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Panels

July 19, 2014 //  by Krishna Srinivasan//  Leave a Comment

In general, panel is representation of information which is sent to user’s display screen in given circumstances. Sometimes we need to put information in box for certain reason or need to put DOM in a box. For those situations, the panel component is very useful. The box will get display with some basic border and padding around the content. Bootstrap provides .panel class within div element.
This tutorial explains following topics which are used with bootstrap panels.

  1. Default Panel
  2. Panel with Heading
  3. Panel with Contextual States
  4. Panel with Tables
  5. Panel with List Groups

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The below examples shows the various techniques used for implementing the panels in Bootstrap. If you have any questions about bootstrap panels, please write it in the comments section.

Bootstrap Default Panel

We can create default panel by using the .panel-default class along with base class .panel. The contents are defined within the .panel-body class which is wrapped with div element. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Default Panel</h2><br>
<div class="panel panel-default">
   <div class="panel-body">
      This is basic Panel
   </div>
</div>
</div>
</body>
</html>
  • Run Bootstrap Default Panel Example

Bootstrap Default Panel Example

Bootstrap Panel Heading

We can give heading for the panel by using the .panel-heading class within the div element and use any of the header tags from h1 to h6 to define title for the panel by just wrapping the .panel-title class within the header tags. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Panel Heading</h2><br>
<div class="panel panel-default">
   <div class="panel-heading">
         <h3 class="panel-title">Bootstrap Definition</h3>
   </div>
   <div class="panel-body">
   The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
   </div>
</div>
</div>
</body>
</html>
  • Run Bootstrap Panel Heading Example

Bootstrap Panel Heading Example

Bootstrap Panels with Contextual States

We can create different types of panels each with different types of colors by wrapping contextual classes within the div element. Following are the contextual classes which provides more meaningful to panel components.

  • panel-primary
  • panel-success
  • panel-info
  • panel-warning
  • panel-danger
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Contextual States Panels</h2><br>
<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">My Panel</h3>
   </div>
   <div class="panel-body">
      Primary Panel
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">My Panel</h3>
   </div>
   <div class="panel-body">
      Success Panel
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">My Panel</h3>
   </div>
   <div class="panel-body">
      Informational Panel
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">My Panel</h3>
   </div>
   <div class="panel-body">
      Warning Panel
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">My Panel</h3>
   </div>
   <div class="panel-body">
      Danger Panel
   </div>
</div>
</div>
</body>
</html>
  • Run Bootstrap Contextual States Panel Example

Bootstrap Contextual States Panel Example

Bootstrap Panel with Table

We can create non bordered table within panel by simply using the .table class with the element <table>. We can also give heading for the table by using the .panel-heading class within the div element and it must be declared before the table class. The .panel-body class is used to add extra border to the top of the table for separation. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Panel Table</h2><br>
<div class="panel panel-default">
   <div class="panel-heading">ICC ODIs Rankings</div>
   <div class="panel-body">
      The table shows ICC Rankings for ODIs updated on 5th June,2014.
   </div>
   <table class="table">
      <thead>
         <tr>
	    <th>Rank</th>
	    <th>Country</th>
	    <th>Ratings</th>
         </tr>
      </thead>
      <tbody>
          <tr>
             <td>1</td>
             <td>Australia</td>
             <td>115</td>
          </tr>
          <tr>
              <td>2</td>
              <td>Srilanka</td>
              <td>112</td>
          </tr>
          <tr>
	      <td>3</td>
	      <td>India</td>
	      <td>112</td>
          </tr>
          <tr>
	      <td>4</td>
	      <td>South Africa</td>
	      <td>109</td>
          </tr>
          <tr>
	      <td>5</td>
	      <td>England</td>
	      <td>109</td>
          </tr>
      </tbody>
   </table>
</div>
</div>
</div>
</body>
</html>
  • Run Bootstrap Panel Table Example

Bootstrap Panel Table Example

Bootstrap Panel with Listgroups

We can create list group by adding the .list-group class within a panel. To define list group within any panel, we can make use of the .list-group class within unordered list element as shown in the below example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Panel Listgroups</h2><br>
<div class="panel panel-default">
   <div class="panel-heading">Top Countries</div>
   <div class="panel-body">
      The following are the top five largest countries in the world.
   </div>
   <ul class="list-group">
      <li class="list-group-item">Russia</li>
      <li class="list-group-item">Canada</li>
      <li class="list-group-item">United States</li>
      <li class="list-group-item">China</li>
      <li class="list-group-item">Brazil</li>
   </ul>
</div>
</body>
</html>
  • Run Bootstrap Panel Listgroups Example

Bootstrap Panel Listgroups Example

Category: BootstrapTag: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Wells
Next Post: Bootstrap Plugins »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact