Theme Options

Sidebar Skins

Layout Options

Layout Options

Clear LocalStorage
  1. Dashboard
  2. Form Elements
  3. Plugins Pages
  4. UI Elements
  5. Documentation

Directional Options

.progress-bar .progress-bar-color
60%
60%
60%
60%
60%
60%
60%
60%
60%
Simply add label: 60%
60%
60%
60%
60%
60%
60%
60%
60%
60%
.progress-bar-striped
60%
60%
60%
60%
60%
60%
60%
60%
60%
.progress.vertical

Vertical Progress Bars should always be used inside individual columns.

.progress.vertical + label
60
60
60
60
60
60
60
60
60

Vertical Progress Bars should always be used inside individual columns.

.progress.vertical.progress-inverse
60
60
60
60
60
60
60
60
60

Vertical Progress Bars should always be used inside individual columns.

General Options

Progress Bar Sizes
Class Description
.progress-bar-xxs
60%
.progress-bar-xs
60%
.progress-bar-sm
60%
.progress-bar
60%
.progress-bar-lg
60%
.progress-bar-xl
60%
Progress Bar Options
Class Description
.progress-bar-striped
40% Complete (success)
.progress-bar-striped
45% Complete
multiple ".progress-bar" wrapped inside ".progress" class
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Right Progress Bars.progress.right
60%
60%
60%
60%
60%
60%
60%
Bottom Vertical Bars.progress.vertical.bottom
60%
60%
60%
60%
60%
60%
60%
60%
60%

Vertical Progress Bars should always be used inside individual columns.

Color Options

.progress-bar-primary
60%
60%
60%
60%
60%
Success
.progress-bar-success
60%
60%
60%
60%
60%
Success
.progress-bar-info
60%
60%
60%
60%
60%
Info
.progress-bar-warning
60%
60%
60%
60%
60%
Warning
.progress-bar-danger
60%
60%
60%
60%
60%
Danger
.progress-bar-alert
60%
60%
60%
60%
60%
Alert
.progress-bar-system
60%
60%
60%
60%
60%
System
.progress-bar-dark
60%
60%
60%
60%
60%
Dark