Examples

The examples below attempt to demonstrate the myriad ways in which you can use Bootbox.

Have an example you'd like to add? Open a new issue, or add a pull-request with your example added to this page.

Alert

Documentation

Basic usage

bootbox.alert("This is the default alert!");
Basic usage, with callback

bootbox.alert("This is an alert with a callback!", function(){ 
    console.log('This was logged in the callback!'); 
});
Basic usage, using HTML element, with callback

let template = $('#alert-message-template');
                            
bootbox.alert(template, function () {
    console.log('This was logged in the callback!');
});
Basic usage, using options object

bootbox.alert({
    message: "This is an alert with a callback!",
    callback: function () {
        console.log('This was logged in the callback!');
    }
});
Small dialog

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This is the small alert!",
    size: 'small' /* or 'sm' */
});

Requires Bootstrap 3.1.0 or newer.

Large dialog

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This is the large alert!",
    size: 'large' /* or 'lg' */
});

Requires Bootstrap 3.1.0 or newer.

Extra-large dialog

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This is the extra-large alert!",
    size: 'extra-large' /* or 'xl' */
});

Requires Bootstrap 4.2.0 or newer.

Custom CSS class (using Animate.css)

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This is an alert with additional classes!",
    className: 'rubberBand animated'
});
Dismiss with overlay click

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This alert can be dismissed by clicking on the background!",
    backdrop: true
});
Using a locale

Also applies to: Confirm, Prompt, Custom 

bootbox.alert({
    message: "This alert uses the Arabic locale!",
    locale: 'ar'
});

Confirm

Documentation

Basic usage

bootbox.confirm("This is the default confirm!", function(result){ 
    console.log('This was logged in the callback: ' + result); 
});
With alternate button text and color

Also applies to: Alert, Prompt, Custom 

bootbox.confirm({
    message: "This is a confirm with custom button text and color! Do you like it?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
With icon and button text

Also applies to: Alert, Prompt, Custom 

bootbox.confirm({
    title: "Destroy planet?",
    message: "Do you want to activate the Deathstar now? This cannot be undone.",
    buttons: {
        cancel: {
            label: '<i class="fa fa-times"></i> Cancel'
        },
        confirm: {
            label: '<i class="fa fa-check"></i> Confirm'
        }
    },
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
Demoing all locales

Also applies to: Alert, Prompt, Custom 

let locale = $('#choose-locale').val();
    
bootbox.confirm({
    message: "This confirm uses the selected locale. Were the labels what you expected?",
    locale: locale,
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});

Prompt

Documentation

Please note: prompt requires the title option (when using the options object). You may use the message option, but the prompt result will not include any form inputs from your message.

Basic usage

bootbox.prompt("This is the default prompt!", function(result){ 
    console.log(result); 
});

If you want to style the input, you can target the .bootbox-input-text class.

Vertically Centered

bootbox.prompt({
    title: "This is a prompt, vertically centered!", 
    centerVertical: true,
    callback: function(result){ 
        console.log(result); 
    }
});
With a custom locale

let locale = {
    OK: 'I Suppose',
    CONFIRM: 'Go Ahead',
    CANCEL: 'Maybe Not'
};

bootbox.addLocale('custom', locale);

bootbox.prompt({ 
    title: "This is a prompt with a custom locale! What do you think?", 
    locale: 'custom',
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});
Prompt with checkbox

bootbox.prompt({
    title: "This is a prompt with a set of checkbox inputs!",
    value: ['1', '3'],
    inputType: 'checkbox',
    inputOptions: [{
        text: 'Choice One',
        value: '1'
    },
    {
        text: 'Choice Two',
        value: '2'
    },
    {
        text: 'Choice Three',
        value: '3'
    }],
    callback: function (result) {
        console.log(result);
    }
});

Checkboxes are nested in an element with the class .bootbox-checkbox-list. If you want to style the individual checkbox inputs, you can target the .bootbox-input-checkbox class.

Prompt with radio buttons and a message value

bootbox.prompt({
    title: "This is a prompt with a set of radio inputs!",
    message: '<p>Please select an option below:</p>',
    inputType: 'radio',
    inputOptions: [{
        text: 'Choice One',
        value: '1'
    },
    {
        text: 'Choice Two',
        value: '2'
    },
    {
        text: 'Choice Three',
        value: '3'
    }],
    callback: function (result) {
        console.log(result);
    }
});

Radio buttons are nested in an element with the class .bootbox-radiobutton-list. If you want to style the individual radio inputs, you can target the .bootbox-input-radio class.

When using the radio option, the first radio button will be checked if value is missing or does not match an inputOptions value.

Prompt with date

Requires browser support: https://caniuse.com/input-datetime 

bootbox.prompt({
    title: "This is a prompt with a date input!",
    inputType: 'date',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the input, you can target the .bootbox-input-date class.

Prompt with email

Requires browser support: https://caniuse.com/mdn-html_elements_input_type_email 

bootbox.prompt({
    title: "This is a prompt with an email input!",
    inputType: 'email',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the input, you can target the .bootbox-input-email class.

Prompt with number

Requires browser support: https://caniuse.com/input-number 

bootbox.prompt({
    title: "This is a prompt with a number input!",
    inputType: 'number',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the input, you can target the .bootbox-input-number class.

Prompt with password

bootbox.prompt({
    title: "This is a prompt with a password input!",
    inputType: 'password',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the input, you can target the .bootbox-input-password class.

Prompt with select

bootbox.prompt({
    title: "This is a prompt with select!",
    inputType: 'select',
    inputOptions: [{
        text: 'Choose one...',
        value: ''
    },
    {
        text: 'Choice One',
        value: '1'
    },
    {
        text: 'Choice Two',
        value: '2'
    },
    {
        text: 'Choice Three',
        value: '3'
    }],
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the select, you can target the .bootbox-input-select class.

Prompt with select & multiple

bootbox.prompt({
    title: "This is a prompt with a multi-select!",
    inputType: 'select',
    multiple: true,
    value: ['1','3'],
    inputOptions: [{
        text: 'Choose one...',
        value: ''
    },
    {
        text: 'Choice One',
        value: '1'
    },
    {
        text: 'Choice Two',
        value: '2'
    },
    {
        text: 'Choice Three',
        value: '3'
    }],
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the select, you can target the .bootbox-input-select class.

Prompt with textarea

bootbox.prompt({
    title: "This is a prompt with a textarea!",
    inputType: 'textarea',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the textarea, you can target the .bootbox-input-textarea class.

Prompt with time

Requires browser support: https://caniuse.com/input-datetime 

bootbox.prompt({
    title: "This is a prompt with a time input!",
    inputType: 'time',
    callback: function (result) {
        console.log(result);
    }
});

If you want to style the input, you can target the .bootbox-input-time class.

Prompt with range

Requires browser support: https://caniuse.com/input-range 

bootbox.prompt({
    title: "This is a prompt with a range input!",
    inputType: 'range',
    min: 0,
    max: 100,
    step: 5,
    value: 35,
    callback: function (result) {
        console.log('This was logged in the callback: ' + result);
    }
});

If you want to style the input, you can target the .bootbox-input-range class.

Custom Dialogs

Documentation

Please note: Custom dialogs accept only one argument: an options object. The only required property of the options object is message.

Custom dialog as "loading" overlay

let dialog = bootbox.dialog({
    message: '<p class="text-center mb-0"><i class="fas fa-spin fa-cog"></i> Please wait while we do something...</p>',
    closeButton: false
});

// do something in the background
dialog.modal('hide');
Custom dialog, using init

Also applies to: Alert, Confirm, Prompt 

let dialog = bootbox.dialog({
    title: 'A custom dialog with init',
    message: '<p><i class="fas fa-spin fa-spinner"></i> Loading...</p>'
});

dialog.init(function(){
    setTimeout(function(){
        dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
    }, 3000);
});
Custom dialog, with buttons and callbacks 

let dialog = bootbox.dialog({
    title: 'A custom dialog with buttons and callbacks',
    message: "<p>This dialog has buttons. Each button has it's own callback function.</p>",
    size: 'large',
    buttons: {
        cancel: {
            label: "I'm a cancel button!",
            className: 'btn-danger',
            callback: function(){
                console.log('Custom cancel clicked');
            }
        },
        noclose: {
            label: "I don't close the modal!",
            className: 'btn-warning',
            callback: function(){
                console.log('Custom button clicked');
                return false;
            }
        },
        ok: {
            label: "I'm an OK button!",
            className: 'btn-info',
            callback: function(){
                console.log('Custom OK clicked');
            }
        }
    }
});
Your message here…