Notifications

Notification and custom alerts

Alerts

Examples

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight requiredcontextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.

Primary Alert

A simple primary alert — check it out!

Primary Alert —Note: There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.

Success Alert

A simple success alert — check it out!

Success Alert —See more .alert-linkexamples at Sales ERP By Example.

Warning Alert

A simple warning alert — check it out!

warning alert —It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Info Alert

A simple Info alert — check it out!

Info alert —There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form

Secondary Alert

A simple Info alert — check it out!

Secondary alert —If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden.

Danger Alert

A simple Info danger — check it out!

Secondary alert —All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this

light Alert

A simple Info light — check it out!

light alert —It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures

Dark Alert

A simple Info dark — check it out!

Dark alert —It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures

Link color

Use the .alert-linkutility class to quickly provide matching colored links within any alert.

Primary Alert Link

A simple primary alert link — check it out!

A simple primary alert with an example link. Give it a click if you like.

Secondary Alert Link

A simple secondary alert link — check it out!

A simple secondary alert with an example link. Give it a click if you like.

Success Alert Link

A simple success alert link — check it out!

A simple success alert with an example link. Give it a click if you like.

Danger Alert Link

A simple danger alert link — check it out!

A simple danger alert with an example link. Give it a click if you like.

Warning Alert Link

A simple warning alert link — check it out!

A simple warning alert with an example link. Give it a click if you like.

Info Alert Link

A simple warning info link — check it out!

A simple info alert with an example link. Give it a click if you like.

Light Alert Link

A simple light info link — check it out!

A simple light alert with an example link. Give it a click if you like.

Dark Alert Link

A simple light dark link — check it out!

A simple dark alert with an example link. Give it a click if you like.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Dismissing

You can see this in action with a live demo:

Holy guacamole!You should check in on some of those fields below.

Notification Styles Inspiration

Notification Styles Inspiration Simple ideas & effects for website notifications

Examples	Action
.... Notification Styles "Scale"....
Jelly
Slide in
Genie
Flip
Bouncy Flip

Examples	Action
Slide On Top
Expanding Loader
Corner Expand
Loading Circle
Box Spinner
Thumb Slider

Sweet Alert

A beautiful replacement for JavaScript's "Alert"

Examples	Action
A basic message
swal("Here's a message!", "It's pretty, isn't it?")
A success message!
swal("Good job!", "You clicked the button!", "success")
A warning message, with a function attached to the "Confirm"-button
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", closeOnConfirm: false},function(){ swal("Deleted!", "Your imaginary file has been deleted.", "success");});
... and by passing a parameter, you can execute something else for "Cancel".
swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!", cancelButtonText: "No, cancel plx!", closeOnConfirm: false, closeOnCancel: false},function(isConfirm){ if(isConfirm) { swal("Deleted!", "Your imaginary file has been deleted.", "success"); } else{ swal("Cancelled", "Your imaginary file is safe :)", "error"); }});
A message with a custom icon
swal({ title: "Sweet!", text: "Here's a custom image.", imageUrl: "images/thumbs-up.jpg"});

Toastr

toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Examples	Action
Toastr example with info
Toastr example with success
Toastr example with warning
Toastr example with danger

Command: toastr["success"]("Example message ", "Example title")toastr.options = {  "closeButton": true,  "debug": false,  "newestOnTop": false,  "progressBar": false,  "positionClass": "toast-top-center",  "preventDuplicates": false,  "onclick": null,  "showDuration": "300",  "hideDuration": "1000",  "timeOut": "5000",  "extendedTimeOut": "1000",  "showEasing": "swing",  "hideEasing": "linear",  "showMethod": "fadeIn",  "hideMethod": "fadeOut"}