Getting Started

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

Compatible with Bootstrap 3 and 4

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

Via npm

Run the following command to add Bootbox to your project:
(NOT LIVE YET)

npm install bootbox

Direct download

If you're not using npm, you can manually add Bootbox:
(NOT LIVE YET)

bootbox.zip

CDN

You can also link to a CDN reference of Bootbox.js (thanks to cdnjs, the Free and Open Source Public Web CDN): (NOT LIVE YET)

With all locales:

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

With only the default locale, en:

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

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 I'd like, but hopefully this handy table will clear things up (if it doesn't then please tell me!):

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.3.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.

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.