Alerts and progress bar

Alerts and progress bar

This chapter will cover notifications and the alert classes provided by Bootstrap. Alerts allow you to customise the way you send notifications to your users. They send contextual feedback messages in response to common user behaviours.

To notify, you may add an optional close icon. Use the Alerts jQuery plugin for inline dismissal.

Create a wrapper div> and add a class of.alert and one of the four contextual classes to create a simple alert (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger). This is demonstrated in the following example.

OUTPUT :

Dismissal Alerts

To create a dismissing alert, create a wrapper div> and add a class of.alert as well as one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger)

To the above div> class, add the optional.alert-dismissable class.

Add a button to close the window.

This is demonstrated in the following example:

OUTPUT :

Progress bar

• The progress bars in Bootstrap are covered in this chapter. Progress bars are used to signal that assets are loading, that work is being done on them, or that something is happening with the items on the page.
• Some of the effects of progress bars are achieved using CSS3 transitions and animations. Internet Explorer 9 and earlier versions of Firefox do not support these functionalities. Animations are not supported in Opera 12. Animations are not supported in Opera 12.
• Progress Bar by default
• Add a with the class.progress to make a rudimentary progress bar.

Add an empty div> with the class.progress-bar within the above div>.

Create a style attribute for the width, which should be given as a percentage. For instance, style = "60 percent" shows that the progress bar was at 60%.

Consider the following example:

OUTPUT :

A Different Progress Bar

Add a div> with the class.progress to make a progress bar with several styles.

Add an empty div> within the above div> with the class.progress-bar and the class progress-bar-*, where * might indicate success, info, caution, or danger.

Create a style attribute for the width, which should be given as a percentage. For instance, style = "60 percent" shows that the progress bar was at 60%.

Consider the following example:

OUTPUT :