Alerts And Notifications

From a technical point of view, the Client is responsible for handling alerts and notifications. The reason for this is when an alert or notification pops up, the UI or the page still might not be loaded. The Client can display a number of messages to the user: these can either be notifications (meaning that they are displayed for a period of time and then automatically disappear) or pop-up alerts. Alerts and notifications aren't technically components, but they are visual elements on a page and this is why you can find them in the Components section.


Alerts show up in pop-up windows and remain there until the user closes them. While an alert is displayed, the user is unable to use the application. Use pop-up alerts if you need user interaction or the message is of high importance.

In JBStrap, you can use the following alert types:

  • Say – A plain text message meant to “say” something to the user. The user can only acknowledge the message by clicking OK. A ' say' alert does not interrupt program execution.

Say popup

  • Error –A plain text message notifying the user of an error. The program execution is not interrupted.

Error popup

  • Ask –Use this to ask the user a Yes/No question. Program execution will be interrupted. The user response is received as a Boolean value ( true for ‘Yes’ and false for ‘No’).

  • Input – This pop-up window prompts the user to enter some text. Program execution is interrupted until the user action is received. User response is stored as a string value. If the user clicks OK without entering any text, the result will be an empty string. If the user presses ESC or clicks ‘Cancel’, the result will be a NULL value.

Input popup

Plain information message:

Error message:

Yes/No question:

User input message:


Notifications appear in the upper right corner of the interface only for a short period of time and then automatically disappear. When several such messages are queued to get displayed, they will be listed below one another. You can keep them on the screen by just holding the mouse over them. Use a notification to display some information of lower importance to the user (program execution will proceed uninterrupted).

Here are the four types of notifications used in JBStrap:

  • Success – Use this one notify the user of a successful operation.

Success popup

  • Info – Use this one to display information.

Info popup

  • Warning – Use this one to display warning messages.

Warning popup

  • Error – Use this one to display error messages.

Error notification

Operation successful:

Display information:

Display a warning message:

Display an error message:

Style customization


Default value

Derived value

Computed value


$toastr-color $white - #fff Toast font color
$toastr-hover-color $gray-400 - $gray-400 Toast hover color
$toastr-warning-color $body-color - $gray-900 Toast warning color
$toastr-width $font-size-base * 23 - 23 rem Toast width
$toastr-shadow 0 0 $font-size-base $gray-600 - 0 0 1 $gray-600 Toast shadow
$toastr-hover-shadow $floating-shadow 0 0 1.875rem rgba($black, 0.1) 0 0 1.875rem rgba(#000, 0.1) Toast hover shadow
$toastr-border-radius $border-radius - $border-radius Rounded toast corners