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

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

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

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/sweetalert2.js"></script>

Examples

Basic example

A title with a text under

A success message

Custom HTML description

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

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

A message with auto close timer set to 2 seconds

Modal window with input field

<div class="places-sweet-alerts">
  <div class="row">
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">Basic example</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('basic')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">A title with a text under</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('title-and-text')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">A success message</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('success-message')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">Custom HTML description</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('custom-html')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">A warning message, with a function attached to the "Confirm" Button...</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('warning-message-and-confirmation')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">...and by passing a parameter, you can execute something else for "Cancel"</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('warning-message-and-cancel')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">A message with auto close timer set to 2 seconds</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('auto-close')">Try me!</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card ">
        <div class="card-body text-center">
          <h5 class="card-text">Modal window with input field</h5>
          <button class="btn btn-primary btn-fill" onclick="md.showSwal('input-field')">Try me!</button>
        </div>
      </div>
    </div>
  </div>
</div>