Search Reports, Charts, Emails or Notifications

UI Elements Basics

Labels & Badges
Default Labels & Badges
Labels
Default Primary Info Success Danger Warning sky blueberry yellow darkorange magenta purple maroon darkpink pink azure orange
Badges
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7
Square Badges
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7
Graded Labels & Badges
Labels
Default Primary Info Success Danger Warning sky blueberry yellow darkorange magenta purple maroon darkpink pink azure orange
Badges
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7
Square Badges
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7
DropDowns
Default DropDown
Multi Level DropDown
DropDown With Icons
DropDown With Labels & Badges
Colored DropDown Buttons
class="dropdown-menu dropdown-info"
Progress Bars
Simple Progress Bars
Basic
20% Complete
60% Complete (warning)
80% Complete
80% Complete
80% Complete
80% Complete
Stripped
40% Complete (success)
40% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Animated
40% Complete (success)
40% Complete (success)
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Stacked
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Advances Progress Bars
Sizes
20% Complete
80% Complete
80% Complete
80% Complete
80% Complete
Bordered
40% Complete (success)
30% Complete (success)
20% Complete (success)
20% Complete (success)
20%
40%
Right Aligned
40% Complete (success)
Without Radius Border
40% Complete (success)
Shadowed
20% Complete
60% Complete (warning)
80% Complete (danger)
Bordered & Stacked
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
Vertical Progress Bars
40%
40%
40%
40%
40%
40%
Bordered
40%
40%
40%
40%
40%
40%
Pagination
Default
Sizes
Pager
Aligned Pager