1
00:00:00,370 --> 00:00:05,790
A progress bar can be used to track the amount of progress that has been made during the process.

2
00:00:06,090 --> 00:00:10,010
Bootstrap provides many different types of progress bar styles.

3
00:00:10,090 --> 00:00:15,330
Keep in mind that the functionality of the progress bar is done separately with languages like Javascript

4
00:00:16,700 --> 00:00:20,360
in this example we can see what a basic progress bar looks like.

5
00:00:21,370 --> 00:00:26,640
The HMO code on the left shows how it was created.

6
00:00:26,840 --> 00:00:33,930
We start with a div element and add the class attribute set to progress.

7
00:00:33,950 --> 00:00:42,850
We then create another nested div and attach the class progress bar the rule needs to be set to progress

8
00:00:42,850 --> 00:00:52,230
bar as well the style equals 50 percent attribute refers to how much progress the bar should show by

9
00:00:52,230 --> 00:00:53,880
default.

10
00:00:53,880 --> 00:01:02,800
It's currently set to 50 percent so the bar should shows half progress so we can see that the dark blue

11
00:01:02,800 --> 00:01:11,940
ends here and the full width of the bar extends to hear we can increase or decrease this value anywhere

12
00:01:11,940 --> 00:01:14,400
between zero to 100 percent.

13
00:01:14,400 --> 00:01:19,020
So if we were to increase it to 80 percent and save the file

14
00:01:21,890 --> 00:01:23,690
we can see that it extends the progress

15
00:01:27,730 --> 00:01:35,160
we can add labels to will progress bar by typing the desired text into the div element here.

16
00:01:35,260 --> 00:01:41,600
So if we wanted to indicate to the user 80 percent we just type it there.

17
00:01:41,640 --> 00:01:44,160
And if you refresh the page you'll see it displayed right there.

18
00:01:45,800 --> 00:01:52,280
We can also apply the contextual classes we've worked with to a progress bar by adding the following

19
00:01:52,280 --> 00:01:52,880
class

20
00:02:00,840 --> 00:02:04,640
and for this example I'll use the success contextual style

21
00:02:07,430 --> 00:02:13,560
save it and we can see it changes to green so remember the other ones can be used as well.

22
00:02:13,590 --> 00:02:15,000
Warning danger

23
00:02:17,720 --> 00:02:28,970
and so on to add stripes to the progress bar you can insert the following class name progress dash bar

24
00:02:29,120 --> 00:02:30,170
dash striped

25
00:02:33,000 --> 00:02:41,260
and then you can see stripes appear inside the progress bar we can also estimate a striped progress

26
00:02:41,260 --> 00:02:47,990
bar by adding the active class.

27
00:02:48,030 --> 00:02:51,330
Keep in mind that this will only work on a striped progress bar.