Panel
A panel is a kind of box that is used to place your contents for better presentation. When .panel
class is used, bootstrap applies some basic styles like borders and padding.
Every content should be presented inside a panel.
Example
Primary PanelPrimary title
Primary content
Success title
Success content
Info title
Info content
Warning title
Warning content
Danger title
Danger content
<!--Primary-->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Primary title</h3>
</div>
<div class="panel-body">
Primary content
</div>
</div>
<!--Success-->
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Success title</h3>
</div>
<div class="panel-body">
Success content
</div>
</div>
<!--Info-->
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Info title</h3>
</div>
<div class="panel-body">
Info content
</div>
</div>
<!--Warning-->
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Warning title</h3>
</div>
<div class="panel-body">
Warning content
</div>
</div>
<!--Danger-->
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Danger title</h3>
</div>
<div class="panel-body">
Danger content
</div>
</div>
More about panels on bootstrap.