Bootstrap 3 Progress Bars are the predefined attractive element of bootstrap, A progress bar is mainly used to show how many presents of a task is completed graphically.
Normal Progress Bar
A normal progress bar is a blue background colored bar and to use any progress bar take a div and give the class name .progress
and inside that take another div with the class name .progress-bar
Example:
Progress Bar With a Label
To give a label in a progress bar write ant text inside the dive with the class name .progress-bar
Example:
Progress Bar With color
In bootstrap 3 there is 5 different colored progress bar and they are
- Deep Blue background or default progress bar (described above)
- Green background or Success progress bar
- Sky blue background or Info progress bar
- Yellow background or warning progress bar
- Red background or Danger progress bar
Green background or Success progress bar
To make a Green background or Success progress bar use class name .progress-bar-success
Example:
Sky blue background or Info progress bar
To make a Sky blue background or Info progress bar use class name .progress-bar-info
Example:
Yellow background or warning progress bar
To make a Yellow background or warning progress bar use class name .progress-bar-warning
Example:
Red background or Danger progress bar
To make a Red background or Danger progress bar use class name .progress-bar-danger
Example:
Progress Bar With Striped
to make a striped progress bar use class name .progress-bar-striped
with its classes
Example:
Progress Bar With Animation
to make an animated progress bar use class name .avtive
with its classes
Example:
Progress Bar With Multiple Color
To make a multi-colored progress bar take multiple div with the class name .progress-bar
and give the class name for relevant colored progress bar inside a parent dive with the class name .progress
Example:
I hope the tutorial Bootstrap 3 Progress Bars helped you, and please provide your comment to make the site better and more useful.
Thanks for Reading