Tutorial on How to Make Bootstrap Alert Box

Bootstrap 3 Alert box is used to get the immediate attention of the end-users such as warning, error, confirmation or success messages. Here can be used as an optional close button to hide the box. the alert box is mainly 4 types and they are…

  • 1. success or light green background with deep green text alert box,
  • 2. info or light blue background with deep blue text alert box,
  • 3. warning or light yellow background with deep yellow text alert box,
  • 4. danger or light red background with deep red text alert box,

to use a close button give an anchor tag with class name .close and data-dismiss=” alert”

example:

×

Bootstrap Alert Box

Bootstrap Alert Box

1. success or light green background with deep green text alert box

It indicates a successful or positive action and to use it use the class name .alert and .alert-success to make it animated you can use the class name .fade and .in also

example:

× Success! Your message has been sent.

2. info or light blue background with deep blue text alert box

It indicates a neutral informative change or action and to use it use the class name .alert and .alert-info to make it animated you can use the class name .fade and .in also

example:

× Note! Please read carefully.

3. warning or light yellow background with deep yellow text alert box

It indicates a warning that might need attention and to use it use the class name .alert and .alert-warning to make it animated you can use the class name .fade and .in also

example:

× Warning! There was a problem.

4. danger or light red background with deep red text alert box

It indicates a dangerous or potentially negative action and to use it use the class name .alert and .alert-danger to make it animated you can use the class name .fade and .in also

example:

× Error! A problem occurred.

You have learned Bootstrap 3 Alert box and please provide your comment to make the site better and useful.

Thanks for reading

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.