You may have several reasons for drawing the attention of visitors to certain parts of your website or maybe you want to alert the users about some information or you may want to keep the users informed about the progress of an operation that they initiate on your website. Let's look at some different mechanisms that bootstrap provides for these kind of operations. Bootstrap has many different components that enable us to keep users informed. We have badges which allow us to draw attention of users to recent updates to our web page. We have alert, error, and warning messages that can be delivered to users should they perform operations that are not allowed. And also, we may use progress bars to keep users informed about the progress of whatever operations that they initiate on our website. Let's look at this in a bit more detail next. Badges are an easy way of adding small amount of information to your website to attract the attention of visitors. As an example, you can see that we have added a couple of badges to this description of the dish here on our main page so you can see that we have the red colored badge drawing attention of the users to the fact that this is a hot item on the menu and perhaps even informing them about the price of the menu. These kind of small pieces of information can be added to your website using a badge. A badge for example, the red one here is created by using a span with the classes badge and badge-danger. You can use the various other colors that are built into the bootstrap framework for creating badges of several different colors. Similarly, you can use a badge-pill which creates a rounded rectangle as you see here, and that can be done by applying the badge, badge-pill class to it along with the badge class. Alerts are another way of informing users about information. So for example, an alert can be created using the alert component which simply can be created by applying the alert with alert-warning for example, in this example that you see warning creating a yellow colored alert. You can apply again danger primary and other bootstrap colors there. And then alert-dismissible class, allows you to include a class there which the user can click to dismiss an alert. To support that operation, you need to also include a button into your alert as you can see inside this div, we included this button here. And the contents of the alert can be formatted using standard HTML as you can see here. So, this enables us to create an alert on our web page. So, to summarize, the Alert can be created by a appling the alert class together with additional qualifying alert classes, which enable you to create alerts in different colors. We can also include links in our alerts. We can also make the alert dismissible by using the alert dismissible class and including a cross button inside our alert. Similarly, progress bars are included in websites to keep users informed about the progress of whatever we have initiated on the website. So for example, if you're uploading a file to a website, then you may want to keep the user informed about how much of the file has completed upload by showing a progress bar on the website. So, creating a progress bar in bootstrap is done by applying the progress class to a div and inside that we can apply another inner div with the class progress bar and also allow that to be further styled by using things like progress bar striped and then you can apply the color for the progress bar by specifying the color as BG hyphen and the color. So, in this case the bg-danger being applied to this progress bar. We can also make the progress part striped, we can also animate the progress bar, and also specify how much of that progress bar needs to be in form. So, by changing this width value dynamically you can create a progress bar that will keep updating itself on the web page. So, to summarize, a progress bar can be created by applying a progress class to the div and inside there an inner div to which you apply the progress bar class will enable you to create progress bar. You can even stack multiple progress bars together to create a stacked progress bar and also apply different colors to the progress bar and also can have different appearance for the progress bar using the progress bar striped class and also progress bar animated class for animating the stripes on our progress bar. Now that we have looked at various ways of alerting users, let's do a simple exercise next and use badges in our web page to draw the attention of users.
