1. Home
  2. Progress Bars

General Options

Progress Bar Sizes
ClassDemo
.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
ClassDemo
.progress-bar-striped
40% Complete (success)
.progress-bar-striped.active
45% Complete
multiple ".progress-bar" wrapped inside ".progress" class
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Bars with label
Simply add label: 60%
60%
60%
60%
60%
60%
60%
60%
Right Progress Bars
.progress.right
60%
60%
60%
60%
60%
60%
60%
Bottom Vertical Bars
.progress.vertical and .progress.vertical.bottom
60%
60%
60%
60%
60%
60%
60%
60%
60%
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