Bootstrap alert with 5 online demos

The alerts in Bootstrap

The alerts classes of Bootstrap allow you to create contextual error, warning, info, and dangerous action alerts. Unlike typical JavaScript alerts, these are not modal like alerts, instead, the users may keep on interacting with other parts of the website.

By using third party plug-ins, you may also create fancy and attractive Bootstrap alerts that may act as a replacement of simple JavaScript alerts.

I will show you creating contextual alerts by using built-in Bootstrap classes along with using different plug-ins to create alerts while using Bootstrap framework.

A demo of alerts by using Bootstrap classes

By using .alert built-in class in an element like <div>,  <p>, <span> etc. you can create contextual alerts in Bootstrap.  To give it specific look, for example, if notifying a user for deleting an account permanently, you can use .alert-danger class along with the .alert class.

Similarly, for showing a success message after performing some action, use alert alert-success classes in that element.

See the following demo with available classes to create contextual alerts:

Bootstrap alerts simple

See online demo and code

In the code section of demo page, you can see I created four Bootstrap alerts by using <p>, <div> and <span> tags where I used main .alert class along with a class related to message’s nature:

 

Alerts in Bootstrap with close option

The alerts in the above demo are not dismissible or giving an option to the user or close it. You may add a close button by using .alert-dismissible class along with adding a button, as shown in the example below:

Bootstrap alert close

See online demo and code

In the demo, I extended above example and just added a close button option in each alert. To add button, the following code is used:

 

You can see all alerts code in the demo page.

A demo to close alert automatically with fade out effect

In this demo, three alerts are visible as the web page loads. The first alert will be “closed’ with a fade out effect in four seconds automatically. The third one will be closed as you click the “close” button with fade out effect. See the demo and code online:

See online demo and code

The first alert is hidden by using this code placed in the <script> section just above the </body> tag:

 

So it will hide automatically.

The third alert is associated with the click event of the button. As you click it, the alert will disappear with fading effect in two seconds by using this code:

 

Following is the markup used to create Bootstrap alerts:

 

Note: You may also use the hide method of jQuery to close alerts without fading effect immediately.

A Bootstrap alert by using bootboxjs plug-in

In this demo, I have used bootbox.js plug-in to create three alerts. Basically, this plug-in uses the Bootstrap modal plug-in, so the alerts will not let you interact with other parts of the website unless some action is performed.

First have a look at alerts by using this plug-in which is followed by its setting up guide.


16.0_3-Bootstrap-alert-bootbox

See online demo and code

You can see, three Bootstrap buttons are created with three different alert types. The first one triggers a normal alert with a message. The following code is used for “Trigger simple alert” button:

 

The second button, “Trigger confirm alert” fires the confirm alert that warns to look before proceeding. The user is given the option to press Ok or Cancel buttons. If you press Ok, another simple alert is shown that confirms the action is completed.

Pressing Cancel also triggers an alert for aborting the action. The following code is used to create a Bootstrap alert for confirmation:

 

The third button triggers a prompt Bootstrap alert. This alert type asks for the user input before proceeding to next step. For example, asking a user his/her name or email etc. This code is used for this alert:

 

In above example, the # bootalert, #confirmalert and #promptalert represent the button IDs. You can see the complete code in the demo page as well.

A demo to change the color of bootbox alert

As such, bootbox.js is using the bootstrap modal plug-in underneath: you may change the look and feel of these alerts by changing it CSS classes.

For example, the modal-header class to change the header of alerts, modal-body class to change the look and feel of the body and so on.

See the following demo along with code:

Bootstrap alert bootbox custom

See online demo and code

You can see the same set of alerts with different color scheme. Following CSS classes overridden the modal alert look and feel:

 

Note: You have to place this CSS after including the Bootstrap CSS.

Setting up Bootbox.js plugin

It is simple to use the bootbox.js plug-in. You simply need to down the bootbox.js file and place it at a directory of your choice. Refer it in the <head> section after the Bootstrap and jQuery libraries as shown below:

    <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>

<script src=”alert/bootbox.min.js”></script>

Start using bootbox to create alerts as shown in the demo.

Credits: You may download bootbox plug-in here.