Alerting Users

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

753 ratings

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

753 ratings

Course 1 of 4 in the Specialization Full-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

From the lesson

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Alerting Users6:03

Exercise (Video): Alerting Users2:05

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play