Panels

Basic example

By default, all the .paneldoes is apply some basic border and padding to contain some content.

Basic panel example 
<divclass="panel panel-default"><divclass="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-titleclass 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 notinherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
Panel footer

Custom panel

Panel Tittle
Panel Contents
Panel title
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 
<divclass="panel panel-primary">...</div><divclass="panel panel-success">...</div><divclass="panel panel-info">...</div><divclass="panel panel-warning">...</div><divclass="panel panel-danger">...</div>