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.
- Default Panel
- Panel with Heading
- Panel with Contextual States
- Panel with Tables
- Panel with List Groups
also read:
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>
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>
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>
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>
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>
Bootstrap Wells