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.

Install

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

npm

npm i bootbox

cdnjs

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

Or, serve the files yourself:

Direct download (via GitHub — please do not link to these files directly)
File Production: Development:
Core

bootbox + default locale (en) only.

bootbox.js bootbox.min.js
Locales

Contains only locales.

bootbox.locales.js bootbox.locales.min.js
Bundled

Includes bootbox + all locales.

bootbox.all.js 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 Supported?
6.x.x Latest 4.6.1 5.x.x 1.9.1
5.x.x 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 or newer, you must also include Popper.js. Bootstrap 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.