Basic

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

Panel with Heading

Easily add a heading container to your panel with .card-header. You may also include any h1 - h6 with a .card-title class to add a pre-styled heading.

Panel with Footer

Wrap buttons or secondary text in .card-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 Collapsed by Default

Add .card-collapsed class to the panel.

Panel Featured

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Contextual Alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel Transparent

Set the panel to transparent background.