Bootstrap Sweet Alerts

Pro Component

Our Bootstrap Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Bootstrap Alerts examples and learn how to use this plugin.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="../../assets/js/plugins/sweetalert.min.js"></script>

Examples

Basic example

A success message

Custom HTML description

Gitgub avatar request

A title with a text under

A message with auto close

A warning message, with a function attached to the "Confirm" Button...

...and by passing a parameter, you can execute something else for "Cancel"

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages

<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('basic')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('success-message')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('custom-html')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('input-field')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('title-and-text')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('auto-close')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('warning-message-and-confirmation')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('warning-message-and-cancel')">Try me!</button>
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('rtl-language')">Try me!</button>