<title>Bootstrap Panel With Contextual Classes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<h2>Bootstrap Panel With Contextual Classes</h2>
<div class="panel panel-default">
<div class="panel-heading">default Heading</div>
Default panel content inside the default panel box.
<div class="panel panel-primary">
<div class="panel-heading">Primary Heading</div>
Primary panel content inside the primary panel box.
<div class="panel panel-success">
<div class="panel-heading">Success Heading</div>
Success panel content inside the success panel box.
<div class="panel panel-info">
<div class="panel-heading">Info Heading</div>
Information panel content inside the info panel box.
<div class="panel panel-warning">
<div class="panel-heading">Warning Heading</div>
Warning panel content inside the warning panel box.
<div class="panel panel-danger">
<div class="panel-heading">Error Heading</div>
Error panel content inside the error panel box.