Panel

Style   Default Light Light colorful Dark Dark colorful

Basic

With title

With image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Last updated 3 mins ago

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Title

Support panel subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Title

Support panel subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

With header and footer

Title with Icon

With list group

Easily include full-width list groups within any panel.

With table

Add any non-bordered .table within a panel for a seamless design.

With tabs

Create a panel with tabs by appending a .nav-tabs element to the .panel-heading.

With buttons

Create a panel with buttons by wrapping .btns or .btn-groups within the .panel-heading-controls element.

With labels

Create a panel with labels by wrapping .label within the .panel-heading-controls element.

With alerts

Create a panel with alerts by adding the .panel-alert class to an .alert element and appending it to the .panel.

With pagination

Create a panel with pagination by wrapping a .pagination element within the .panel-heading-controls element.

With pager

Create a panel with pager by wrapping a .pager element within the .panel-heading-controls element.

With progress

Create a panel with progress by wrapping a .progress element within the .panel-heading-controls element.

With text

With icon

Create a panel with an icon by appending a .panel-heading-icon element to the .panel-heading.

With input group

Create a panel with an input group by wrapping an .input-group element within the .panel-heading-controls element.

With input

Create a panel with an input by wrapping a .form-control element within the .panel-heading-controls element.

With switcher

Create panel with a switcher by wrapping a .switcher element within the .panel-heading-controls element.

With wizard

Create a panel with a wizard by adding the .panel-wizard class to a .wizard element and appending it to the .panel.

Colors