A progress bar can be used to track the amount of progress that has been made during the process.
Bootstrap provides many different types of progress bar styles.
Keep in mind that the functionality of the progress bar is done separately with languages like Javascript
in this example we can see what a basic progress bar looks like.
The HMO code on the left shows how it was created.
We start with a div element and add the class attribute set to progress.
We then create another nested div and attach the class progress bar the rule needs to be set to progress
bar as well the style equals 50 percent attribute refers to how much progress the bar should show by
default.
It's currently set to 50 percent so the bar should shows half progress so we can see that the dark blue
ends here and the full width of the bar extends to hear we can increase or decrease this value anywhere
between zero to 100 percent.
So if we were to increase it to 80 percent and save the file
we can see that it extends the progress
we can add labels to will progress bar by typing the desired text into the div element here.
So if we wanted to indicate to the user 80 percent we just type it there.
And if you refresh the page you'll see it displayed right there.
We can also apply the contextual classes we've worked with to a progress bar by adding the following
class
and for this example I'll use the success contextual style
save it and we can see it changes to green so remember the other ones can be used as well.
Warning danger
and so on to add stripes to the progress bar you can insert the following class name progress dash bar
dash striped
and then you can see stripes appear inside the progress bar we can also estimate a striped progress
bar by adding the active class.
Keep in mind that this will only work on a striped progress bar.