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.
Jogesh K. MuppalaAssociate Professor
