Basic Usage

This is the simplest usage of Bootbox, requiring only the text of the message you wish to show.

bootbox.alert("Your message here…")

Your message can also contain HTML.

bootbox.alert("Your message <b>here…</b>")

Advanced Usage

If you have code that should not be evaluated until the user has dismissed the alert (see Bootbox Limitations below), call it within the callback function:

bootbox.alert("Your message here…", function(){
    /* your callback code */ 
})

Alerts can be customized, using the options described below. Here's an example of a small alert, using size:

bootbox.alert({
    size: "small",
    title: "Your Title",
    message: "Your message here…",
    callback: function(){ /* your callback code */ }
})

Requires Bootstrap 3.1.0 or newer.

Basic Usage

The simplest method of using the confirm() dialog requires the text of the message you wish to show and a callback to handle the user's selection. The callback function is passed a value of true or false, depending on which button the user pressed.

bootbox.confirm("Are you sure?", function(result){
    /* your callback code */ 
})

Advanced Usage

Confirm dialogs can be customized, using the options described below. Here's an example of a small confirm, using size:

bootbox.confirm({ 
    size: "small",
    message: "Are you sure?",
    callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ }
})

Requires Bootstrap 3.1.0 or newer.

Basic Usage

The simplest usage of the prompt() dialog requires the text of the message you wish to show and a callback to handle the user's input. The value entered will be null if the user cancelled or dismissed the dialog; otherwise it is passed the value of the text input.

bootbox.prompt("What is your name?", function(result){
    /* your callback code */ 
})

Advanced Usage

Prompt dialogs can also be customized, using the options described below. Here's an example of a small prompt, using size:

bootbox.prompt({ 
    size: "small",
    title: "What is your name?",
    callback: function(result){ 
        /* result = String containing user input if OK clicked or null if Cancel clicked */ 
    }
});

Requires Bootstrap 3.1.0 or newer.

Prompt Dialog Options

Prompt dialogs are (by default) single-line text inputs. You can modify the type of prompt Bootbox generates using the prompt-only options below.

value

Type: String | Number | Array

You can set the initial value of the prompt using the value option.

To pre-select more than one value (when using the checkbox or multiple select type), use an array for the value option. Note that the type of each item should match the type from inputOptions.

Default: null

inputType

Type: String

Changes the type of input generated for the prompt dialog.

To pre-select more than one value (when using the checkbox or multiple select type), use an array for the value option. Note that the type of each item should match the type from inputOptions.

Valid values, with their class selectors:

Name	Class
text (default)	bootbox-input-text
password	bootbox-input-password
textarea	bootbox-input-textarea
email	bootbox-input-email
select	bootbox-input-select
checkbox	bootbox-input-checkbox
radio *	bootbox-input-radio
date	bootbox-input-date
time	bootbox-input-time
number	bootbox-input-number
range *	bootbox-input-range

Additionally, checkbox and radiobuttons are wrapped in a parent element, bootbox-checkbox-list and bootbox-radiobutton-list, respectively.

email, date, time, number, and range all require browser support to function properly. You may want to consult caniuse.com to determine if your target browsers support the input types you are intending to use.

Date input type and browser support

At the time this is written, every major browser which supports the date input type will only accept date values in the ISO 8601 format, which (for a complete date) is YYYY-MM-DD, where

YYYY = four-digit year
MM   = two-digit month (01=January, etc.)
DD   = two-digit day of month (01 through 31)

See https://en.wikipedia.org/wiki/ISO_8601

Range input and default value

Please note that, when using the range input type, the default min value is 0 and the default max value is 100 (see MDN). If you attempt to set the default value to something outside the min or max values, the input will default to the respective value.

Default: text

inputOptions

Type: Array

If you specify select, checkbox, or radio as the input type, you must also supply an array of valid values in the format of:

{
    text: '',
    value: '',
    group: ''
}

group is an optional property for populating the <select>; if specified, <optgroup> elements will be generated for each group value found in the inputOptions array.

Default: null

min, max *

Type: String | Number | Date String | Time string

The min or max value for the <input> element. Only valid for date, time, number, and range types.

For range and number, min/max must be a numeric value.

For time, min/max must a valid partial time value, in the form of HH:MM:SS, where

HH = any zero-padded value between 00 and 23
MM = any zero-padded value between 00 and 59
SS = any zero-padded value between 00 and 59

For date, min/max must a date value in the form of YYYY-MM-DD, where

YYYY = four-digit year
MM   = two-digit month (01=January, etc.)
DD   = two-digit day of month (01 through 31)

See the MDN article for min or max for more information.

step *

Type: String | Number

The step value for the <input> element. Only valid for time, number, and range types.

Can be the string value any (the browser default), or a positive, non-zero numeric value. See the MDN article for <input> for more information.

Warning: For most browsers, date inputs are buggy in their implementation of step, so this attribute would likely have no effect. Therefore, we don't set the step attribute for date inputs.

See the MDN article for more information.

maxlength

Type: Number

Set the maxlength option to limit the number of characters entered into a text-based input. Must be a positive, non-zero numeric value.

Valid for text, textarea, email, and password

pattern

Type: String

Set the pattern option to require the input value to follow a specific format. If pattern is set and a value has been entered by your user, the prompt will not close if the input value fails pattern validation.

Can be added for any input type, but generally only used for text inputs, normally as a fallback for email, time, date, number or range inputs where native browser support for those types is lacking.

placeholder

Type: String

Set the placeholder option to provide a small amount of "helper" text within a text-based input.

There is no real limit on the amount of text you may use for your placeholder, but keep in mind that the placeholder disappears when the input has focus (depending on the browser) or has a value. Use the message option to provide help text which you want to always be visible or that is important.

Valid for text, textarea, email, and password.

If specified for time, date, number, or range inputs, your users will normally only see the placeholder where native browser support for those types is lacking.

required *

Type: Boolean

Set the required option to true to require an input value. When true, the prompt will not close if the input value is null, an empty string, or fails the input type's built-in validation constraints.

Valid for text, textarea, email, password, select, time, date, number, and range types.

multiple *

Type: Boolean

Set the multiple option to true to allow users to select more than one option when using the select input type.

To pre-select more than one value, use an array for the value option. Note that the type of each item should match the type from inputOptions.

Valid only for the select type.

rows *

Type: Number

Set the rows option to a non-zero number to set the rows attribute when using the textarea input type. If omitted, the rows attribute is not set and the textarea will render with the browser's default number of rows.

Valid only for the textarea type.

Please see the Examples page for more examples of prompt dialogs.

Custom dialogs do not close automatically when the ESC key is pressed; you must implement this behavior yourself using the onEscape option.

Basic Usage

The minimum required to create a custom dialog is the message option, which will create a non-dismissable dialog (useful as a "loading" overlay).

bootbox.dialog({ 
    message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>', 
    closeButton: false 
})

Advanced Usage

As noted above, the only required option for a custom dialog is message. Also, custom dialogs do not utilize a global callback; each button you add should have it's own callback function. Here's an example with many of the options utilized:

bootbox.dialog({ 
    title: 'Custom Dialog Example',
    message: '<p>This dialog demonstrates many of the options available when using the Bootbox library</p>',
    size: 'large',
    onEscape: true,
    backdrop: true,
    buttons: {
        fee: {
            label: 'Fee',
            className: 'btn-primary',
            callback: function(){
                                
            }
        },
        fi: {
            label: 'Fi',
            className: 'btn-info',
            callback: function(){
                                
            }
        },
        fo: {
            label: 'Fo',
            className: 'btn-success',
            callback: function(){
                                
            }
        },
        fum: {
            label: 'Fum',
            className: 'btn-danger',
            callback: function(){
                                
            }
        }
    }
})

Please see the Examples page for more examples of custom dialogs.