By default, all the
.panel does is apply some basic border and padding to contain some content.
<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
<h6> with a
.panel-title class to add a pre-styled heading.
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.
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
<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>