Bootbox.js is designed to make using Bootstrap modals easier! Follow the guide below, and you should be up and running in no time.

Download

Bootbox can be added to your project in two easy ways:

Via npm

npm i bootbox

Via cdnjs

https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js

Or, serve the files yourself:

Direct download

Development: bootbox.js , bootbox.locales.js , bootbox.all.js
Production: bootbox.min.js , bootbox.locales.min.js
Production, with locales: bootbox.all.min.js

Once you've downloaded Bootbox, skip down to the Usage Instructions for help setting up the library.

Dependencies

All versions of Bootbox stand on the shoulders of two great giants: Bootstrap and jQuery. The exact version of Bootstrap depends on the version of Bootbox you're using. This has become slightly more complex than we'd like, but hopefully this handy table will clear things up:

Bootbox version Min. Bootstrap version Max. Bootstrap Min. jQuery
5.x.x Latest 3.0.0 * 4.x.x 1.9.1
4.x.x 3.0.0 3.4.x 1.9.1
3.x.x 2.2.2 2.3.2 1.8.3
2.x.x 2.0.0 2.0.4 1.7.1
1.x.x 1.3.0 1.4.0 1.7.1
* Some options, like size, require Bootstrap 3.1.0 or higher.

If you are using Bootstrap 4, you must also include Popper.js. Bootstrap also currently includes a bootstrap.bundle.min.js file in the pre-compiled version, if you prefer, which combines Popper.js with the bootstrap.js source file.

Usage Instructions

Once you’ve got your dependencies sorted, usage is fairly straightforward and much like any other JavaScript library you’ve ever used. The library creates a single global instance of a bootbox object: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My page</title>

    <!-- CSS dependencies -->
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>

    <p>Content here. <a class="show-alert" href=#>Alert!</a></p>

    <!-- JS dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap 4 dependency -->
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>

    <!-- bootbox code -->
    <script src="bootbox.min.js"></script>
    <script src="bootbox.locales.min.js"></script>
    <script>
        $(document).on("click", ".show-alert", function(e) {
            bootbox.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>
</body>
</html>

Note the order of the script references

Since Bootbox is a wrapper around Bootstrap's modal functionality, you need to include the libraries in order:

  1. jQuery
  2. Popper.js
  3. Bootstrap
  4. Bootbox
  5. Bootbox Locales (optional - omit if you only need the default English locale)

When you're up and running, check out some examples or the documentation.