Create Bootstrap modal easily with Bootbox.js

Tram Ho

Bootbox.js is a javascript library that makes Bootstrap modal easier with just a few lines of code.


There are many ways to add this library to your application:

  • Use NPM

  • Use cdnjs

  • Direct download

Note: Bootbox is based on Boostrap and jQuery , so you need to have these 2 libraries installed so that Bootbox can run.


After installation is complete, you simply call the methods of Bootbox in your js and you’re done.

Alert Dialog

  • Basic

  • You can also use html text:

  • If you need to execute the code after dismissing the alert, you must use the callback:

  • You can customize the alert as follows:

In which size: “small” | “large” | “extra-large”

Confirm Dialog

  • Basic

Here, the default alert will have two actions: cancel and ok. If cancel, the result will be false, if ok then the result will be true.

  • You can customize this confirmation as follows:

In which size: “small” | “large” | “extra-large”

Custom Dialog

Above the Alert Dialog and confirm dialog is the dialog available in Bootbox.js, but many of you can customize the new dialog type according to your needs as follows:


  • title: title of the dialog
  • message: Content needs to be displayed in the dialog.
  • size: “small” | “large” | “extra-large”.
  • onEscape: true | false. Is there a dismiss dialog with the ESC.
  • backdrop: true | false. Do you need show backdrop or not.
  • buttons: buttons to display. including label , className and callback .

This article is a basic guide on how to use this Bootbox.js. In addition to other methods, events. You can view the details and learn more on its documentation.

Share the news now

Source : Viblo