Bootstrap Panels
Create Basic Panels
By default, all the .panel does is apply some basic border and padding to contain some content.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from ww w. jav a 2 s . c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel">
Basic panel example
</div>
</body>
</html>
Panel with heading
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- w w w .ja v a 2 s.c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel">
<div class="panel-heading">Panel heading</div>
Panel content
</div>
</body>
</html>
Heading tags for panel title
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from ww w. j a v a 2 s . co m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
</body>
</html>
Panel with footer
Wrap buttons or secondary text in .panel-footer.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w ww. j a va 2 s .c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel">
Panel content
<div class="panel-footer">Panel footer</div>
</div>
</body>
</html>
Contextual Panel style
We can make a panel more meaningful to a particular context by adding any of the contextual state classes.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w. ja v a2 s . c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
Panel content
</div>
</body>
</html>
Panel With list groups
Include full-width list groups within any panel.
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- w w w. ja va 2 s . c om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin:20px;'>
<div class="panel">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</body>
</html>