1 00:00:03,650 --> 00:00:08,240 You may have several reasons for drawing the attention of visitors 2 00:00:08,240 --> 00:00:11,890 to certain parts of your website or maybe you want to alert 3 00:00:11,890 --> 00:00:16,370 the users about some information or you may want to keep 4 00:00:16,370 --> 00:00:22,150 the users informed about the progress of an operation that they initiate on your website. 5 00:00:22,150 --> 00:00:25,840 Let's look at some different mechanisms that 6 00:00:25,840 --> 00:00:30,750 bootstrap provides for these kind of operations. 7 00:00:30,750 --> 00:00:38,810 Bootstrap has many different components that enable us to keep users informed. 8 00:00:38,810 --> 00:00:42,440 We have badges which allow us to draw attention of 9 00:00:42,440 --> 00:00:46,550 users to recent updates to our web page. 10 00:00:46,550 --> 00:00:48,365 We have alert, error, 11 00:00:48,365 --> 00:00:52,010 and warning messages that can be delivered to users should 12 00:00:52,010 --> 00:00:56,470 they perform operations that are not allowed. 13 00:00:56,470 --> 00:01:01,870 And also, we may use progress bars to keep users informed 14 00:01:01,870 --> 00:01:08,135 about the progress of whatever operations that they initiate on our website. 15 00:01:08,135 --> 00:01:11,455 Let's look at this in a bit more detail next. 16 00:01:11,455 --> 00:01:15,800 Badges are an easy way of adding small amount of 17 00:01:15,800 --> 00:01:21,085 information to your website to attract the attention of visitors. 18 00:01:21,085 --> 00:01:24,710 As an example, you can see that we have added a couple of badges to 19 00:01:24,710 --> 00:01:30,890 this description of the dish here on our main page so you 20 00:01:30,890 --> 00:01:37,480 can see that we have the red colored badge drawing attention of the users to 21 00:01:37,480 --> 00:01:40,495 the fact that this is a hot item on the menu 22 00:01:40,495 --> 00:01:44,605 and perhaps even informing them about the price of the menu. 23 00:01:44,605 --> 00:01:51,455 These kind of small pieces of information can be added to your website using a badge. 24 00:01:51,455 --> 00:01:52,960 A badge for example, 25 00:01:52,960 --> 00:02:00,400 the red one here is created by using a span with the classes badge and badge-danger. 26 00:02:00,400 --> 00:02:04,495 You can use the various other colors that are built into 27 00:02:04,495 --> 00:02:11,945 the bootstrap framework for creating badges of several different colors. 28 00:02:11,945 --> 00:02:18,075 Similarly, you can use a badge-pill which creates a rounded rectangle as you see here, 29 00:02:18,075 --> 00:02:21,700 and that can be done by applying the badge, 30 00:02:21,700 --> 00:02:26,000 badge-pill class to it along with the badge class. 31 00:02:26,000 --> 00:02:30,655 Alerts are another way of informing users about information. 32 00:02:30,655 --> 00:02:37,245 So for example, an alert can be created using the alert component 33 00:02:37,245 --> 00:02:45,370 which simply can be created by applying the alert with alert-warning for example, 34 00:02:45,370 --> 00:02:50,285 in this example that you see warning creating a yellow colored alert. 35 00:02:50,285 --> 00:02:57,075 You can apply again danger primary and other bootstrap colors there. 36 00:02:57,075 --> 00:02:59,955 And then alert-dismissible class, 37 00:02:59,955 --> 00:03:06,190 allows you to include a class there which the user can click to dismiss an alert. 38 00:03:06,190 --> 00:03:08,140 To support that operation, 39 00:03:08,140 --> 00:03:14,625 you need to also include a button into your alert as you can see inside this div, 40 00:03:14,625 --> 00:03:16,740 we included this button here. 41 00:03:16,740 --> 00:03:23,505 And the contents of the alert can be formatted using standard HTML as you can see here. 42 00:03:23,505 --> 00:03:27,490 So, this enables us to create an alert on our web page. 43 00:03:27,490 --> 00:03:32,320 So, to summarize, the Alert can be created by a appling the alert class 44 00:03:32,320 --> 00:03:37,585 together with additional qualifying alert classes, 45 00:03:37,585 --> 00:03:40,560 which enable you to create alerts in different colors. 46 00:03:40,560 --> 00:03:43,145 We can also include links in our alerts. 47 00:03:43,145 --> 00:03:46,110 We can also make the alert dismissible by using 48 00:03:46,110 --> 00:03:51,260 the alert dismissible class and including a cross button inside our alert. 49 00:03:51,260 --> 00:03:55,360 Similarly, progress bars are included in websites to keep 50 00:03:55,360 --> 00:03:59,680 users informed about the progress of whatever we have initiated on the website. 51 00:03:59,680 --> 00:04:04,100 So for example, if you're uploading a file to a website, 52 00:04:04,100 --> 00:04:08,105 then you may want to keep the user informed about how much of the file has 53 00:04:08,105 --> 00:04:12,780 completed upload by showing a progress bar on the website. 54 00:04:12,780 --> 00:04:16,780 So, creating a progress bar in bootstrap is 55 00:04:16,780 --> 00:04:22,155 done by applying the progress class to a div and inside that we can apply 56 00:04:22,155 --> 00:04:26,265 another inner div with the class progress bar and 57 00:04:26,265 --> 00:04:30,695 also allow that to be further styled by using things like 58 00:04:30,695 --> 00:04:34,890 progress bar striped and then you can apply the color for 59 00:04:34,890 --> 00:04:40,180 the progress bar by specifying the color as BG hyphen and the color. 60 00:04:40,180 --> 00:04:44,910 So, in this case the bg-danger being applied to this progress bar. 61 00:04:44,910 --> 00:04:47,150 We can also make the progress part striped, 62 00:04:47,150 --> 00:04:49,395 we can also animate the progress bar, 63 00:04:49,395 --> 00:04:54,100 and also specify how much of that progress bar needs to be in form. 64 00:04:54,100 --> 00:04:58,015 So, by changing this width value 65 00:04:58,015 --> 00:05:04,925 dynamically you can create a progress bar that will keep updating itself on the web page. 66 00:05:04,925 --> 00:05:08,350 So, to summarize, a progress bar can be created by 67 00:05:08,350 --> 00:05:12,030 applying a progress class to the div and inside 68 00:05:12,030 --> 00:05:14,260 there an inner div to which you apply 69 00:05:14,260 --> 00:05:18,800 the progress bar class will enable you to create progress bar. 70 00:05:18,800 --> 00:05:22,450 You can even stack multiple progress bars together to create 71 00:05:22,450 --> 00:05:28,325 a stacked progress bar and also apply different colors to the progress bar and also 72 00:05:28,325 --> 00:05:32,865 can have different appearance for the progress bar using 73 00:05:32,865 --> 00:05:36,570 the progress bar striped class and also progress bar 74 00:05:36,570 --> 00:05:41,375 animated class for animating the stripes on our progress bar. 75 00:05:41,375 --> 00:05:45,515 Now that we have looked at various ways of alerting users, 76 00:05:45,515 --> 00:05:50,925 let's do a simple exercise next and use badges 77 00:05:50,925 --> 00:05:58,090 in our web page to draw the attention of users.