container-header

Panels

container-breadcrumb
  1. Home
  2. UI Elements
  3. Panels
Settings
Fixed sidebar
Fixed footer
Fixed top navbar
Collapse sidebar
Boxed
Background
Default
Dark
Light
Themes
Default
White Light
Blue Navy
Blue Sky
Lime Lemon
Star Dust
Green Tea
Orange Round
Yellow Sun
Deep Purple
Yummy Chocolate
Dark Night
Soft Green
Wheel Red

Panel basics

Panel Basic
CSS Classes: .panel .panel-heading .panel-title .panel-body
Panel with Control panel
CSS Classes: .panel .panel-heading .panel-control
Basic panel Without Header & Footer
Basic panel Color Without Header & Footer
Panel Full bodyand List Group
  • CSS Classes: .panel-body .panel-full
  • 2h Call Jane Lois (Marketing)
  • 6h Do maintenance work in server
  • 8 h Check server status (Database)
  • 12 h Meeting with partners
  • 22h Video conference with Australia
Basic panel with Footer
CSS Classes: .panel .panel-heading .panel-title .panel-body .panel-footer
Footer
Panel with Header & Footer color
CSS Classes: .panel-info .panel-footer-color
Header Transparent
CSS Classes: .panel .panel-transparent-header
Panel Transparent
CSS Classes: .panel .panel-transparent
Panel Iconed
CSS Classes: .panel .panel-plain

UI Elements integration

Panel with Tabs

Home

Profile

Messages

Configuration

CSS Classes: .panel .panel-heading .panel-control
Panel Progress bar
CSS Classes: .panel .panel-heading .panel-control
Panel with Paginator
CSS Classes: .panel .panel-heading .panel-control
Footer
With Buttons
CSS Classes: .panel .panel-heading .panel-control
With Input element
CSS Classes: .panel .panel-heading .panel-control
Panel Dropdown
CSS Classes: .panel .panel-heading .panel-control
Footer
With Alerts
You saved the configuration successfully
We also updated your profile
CSS Classes: .panel .panel-alert
With Pager
CSS Classes: .panel .panel-heading .panel-control
5 Errors1
With Labels and Badges
CSS Classes: .panel .panel-heading .panel-control

Theme color panel

Add .panel-themeclass to the divwith .panelclass.

Change the color theme to see how the panel changes:
Headercolor panel
CSS Classes: .panel-theme
Header & Footercolor panel
CSS Classes: .panel-footer-color
Footer
Fullcolor panel
CSS Classes: .panel-body-color

Bootstrap color panels

CSS Classes: .panel-default, .panel-primary, .panel-info, .panel-success, .panel-warning, .panel-dangerand .panel-inverse

In combination with: .panel-footer-colorand .panel-body-color

Header color panel

Info panel
Warning panel
Default panel

Header & Footer color panel

Success panel
Danger panel

Full color panel

Primary panel
Inverse panel