Custom Alert for Bootstrap 4

January 04, 2020 No comments jQuery Bootstrap4 Alert Popup Modal Custom

1. Introduction

boot4alert is a jQuery plugin designed to create Bootstrap 4 modals on demand. This plugin is very light and easy to use. boot4alert can be used to create an alert or confirm message with Bootstrap 4 modals. We can provide the title and content of the popup, programmatically in JavaScript code.

Light javascript library for bootstrap4 modals

2. Plugin Overview

Library boot4alert.js
Author Chanchai jeimvijack
Licence MIT Licence
Repository GitHub
Dependencies jQuery 3.3.1 and Bootstrap 4.2


3. How to install and use boot4alert jQuery plugin

Follow these steps in order to install boot4alert jQuery plugin.

1. Load jQuery library into your HTML page:

<!-- jQuery -->
<script src=""></script>

2. Include all Bootstrap 4 assets (CSS file and JavaScript):

<!-- Bootstrap CSS -->
<link href="" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

3. Include boot4alert script:

<!-- Boot4Alert JS -->
<script src="boot4alert.js"></script>

4. To programmatically show bootstrap modal use boot4.alert() function:

      msg: "Call Back",
      title: "Test Callback",
      callback: function() {

for confirmation popup use boot4.confirm() method:

    msg: "Yet another jQuery/Bootstrap dialog box plugin used to replace the native alert and confirmation popup boxes using Bootstrap 4 modal component.",
    title: "Confirm Message",
    callback: function(result) {
      if (result) {
      } else {

4. Conclusion

In this article, we focused on boot4alert jQuery plugin that lets you open bootstrap modal programmatically with title and content provided in JavaScript code. This library should be useful in dynamic web applications where modal content is not constant.

{{ message }}

{{ 'Comments are closed.' | trans }}