6 Bootstrap alert examples to learn and use in your projects

Bootstrap Alert

The Bootstrap framework provides classes to work with different alerts in your web applications. An alert is a way to communicate with the user for specific actions like notifying of an error, a confirmation before submission of crucial information, alerting for files or account deletion upon delete request etc.

This tutorial will show you how to use the alert.js plugin provided by the Bootstrap and also extending it by using the third party plugin for creating more interactive alerts with examples.

To create any alert you need to use the .alert class in wrapper <div> with required contextual class. To learn more about it, see the examples below.

Creating a basic alert example

The Following example creates basic alerts for success and warning types. A wrapper div is assigned the .alert class with alert-success and the other with alert-warning class.

Experience this online

Create an alert with close button example

To give your bootstrap alert messages close or dismiss functionality, you have to create a button and add the data-dismiss=”alert” to it. Following example creates two alerts: the first one is danger alert type that uses alert-danger and other uses alert-info class with the close button.

Experience this online

You can include HTML elements like headings, links etc. in the bootstrap alerts. The following example creates two alerts with headings, <span> and hyperlinks inside the alert.

Experience this online

Creating Modal dialogs with Bootstrap

Though modal alerts are not available in Bootstrap framework, you can use third-party plug-in provided by Nick Payne to create the Modal dialogs. Following examples create basic, confirm, prompt and custom modal alerts using bootboxjs plugin. You can download the bootbox plug-in here:


Basic Modal alert with bootbox

Following example creates a basic alert by using the bootbox plug-in. You simply need to place the bootbox.min.js file after downloading from the provided link to the js folder, where you have source files.

Experience this online

Confirm Modal alert example

Following example creates a Confirm modal alert that shows Cancel and Ok buttons to proceed. You need to simply replace bootbox.alert to bootbox.confirm in the above example to create confirm modal alert.

Experience this online

Prompt Modal alert example

The example below creates a Prompt modal alert. The modal window asks to enter some text in a textbox and gives the option to press OK or Cancel. You can place handler in the javascript to process the information.

Experience this online

Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form

Was this article helpful?

Related Articles

Leave A Comment?