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.
Bootbox.js is designed to make using Bootstrap modals easier! Follow the guide below, and you should be up and running in no time.
Bootbox can be added to your project in two easy ways:
Run the following command to add Bootbox to your project:
(NOT LIVE YET)
npm install bootbox
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 | Notes |
---|---|---|---|---|
5.x.x Latest | 3.0.0 * | 4.x.x | 1.9.1 | Current release. Updated to support Bootstrap 4. Retains compatibility with Bootstrap 3. |
4.x.x | 3.0.0 | 3.3.x | 1.9.1 | Entirely rewritten to support Bootstrap 3.0.0. |
3.x.x | 2.2.2 | 2.3.2 | 1.8.3 | Last version to support Bootstrap 2. |
2.x.x | 2.0.0 | 2.0.4 | 1.7.1 | As you can see, Bootstrap 2.1.x was never officially supported. |
1.x.x | 1.3.0 | 1.4.0 | 1.7.1 | Don't download this version of Bootbox — it's old. |
* 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>
Since Bootbox is a wrapper around Bootstrap's modal functionality, you need to include the libraries in order:
When you're up and running, check out some examples or the documentation.