English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap basic tutorial

Bootstrap plugin

Bootstrap Panels

This chapter will explain Bootstrap panels. The panel component is used to insert DOM components into a box. To create a basic panel, just add the class .panel and class .panel-default as shown in the following example:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　　<title>Bootstrap Example　-　Default panel</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
　　　　<div class="panel-body">
　　　　　　　　This is a basic panel
　　　　</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Panel title

We can add panel titles in the following two ways:

  • Using .panel-heading class can simply add a title container to the panel.

  • Using .panel-title class's <h1>-<h6> to add predefined style titles.

The following example demonstrates these two methods:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Panel title</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
	<div class="panel-heading">
		Panel title without title
	</div>
	<div class="panel-body">
		Panel content
	</div>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">
			Panel title with title
		</h2>
	</div>
	<div class="panel-body">
		Panel content
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Panel note

We can add a note to the panel, just need to place the button or subtitle in the class .panel-footer in the <div>. The following example demonstrates this:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Panel note</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
	<div class="panel-body">
		This is a basic panel
	</div>
	<div class="panel-footer">Panel note</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

The footer note of the panel does not inherit the color and border from the panel with contextual color, because it is not the content in the foreground.

Panel with contextual color

Usage context status class panel-primary, panel-success, panel-info, panel-warning, panel-dangerto set contextual colored panels, the following examples show:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Contextual colored panels</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
</div>
<div class="panel panel-info">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
</div>
<div class="panel panel-warning">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
</div>
<div class="panel panel-danger">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Panel with Table

To create a borderless table within a panel, we can use the class .table. Suppose there is a <div> containing .panel-body, we can add an extra border to the top of the table to separate. If it does not contain .panel-body of the <div>, the component will smoothly move from the panel header to the table.

The following example demonstrates this:

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Panel with Table</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
	<div class="panel-heading">
		<h2　class="panel-title">Panel Title</h2>
	</div>
	<div class="panel-body">
		This is a basic panel
	</div>
	<table class="table">
		<th>Product/th><th>Price/th>
		<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 Title</div>
	<table class="table">
		<th>Product/th><th>Price/th>
		<tr><td>Product A</td><td>200</td></tr>
		<tr><td>Product B</td><td>400</td></tr>
	</table>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Panel with List Group

We can include list groups within any panel by adding .panel and .panel-default classes to create panels and add list groups within a panel. You can start with List Groups Learn how to create list groups in one chapter.

Online Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Panel with List Group</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default">
	<div class="panel-heading">Panel Title</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. This is a basic panel content.
		</p>
	</div>
	<ul class="list-group">
		li class="list-group-item">Free Domain Registration</li>
		li class="list-group-item">Free Windows 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">Annual Update Cost</li>
	</ul>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap WellsBootstrap List Groups