Panels
Basic example
By default, all the .panel does is apply some basic border and padding to contain some content.
Basic panel example
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
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.
Panel heading without title
Panel content
Panel title
Panel content
Panel with footer
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Panel content
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
Panel title
Panel content
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>