Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components.

Using Bootstrap icon

We have already defined the Bootstrap icon set for BootstrapMsg in Msg.ICON.BOOTSTRAP. To use this set of icons, you only need Msg.icon = Msg.ICONS.BOOTSTRAP;

Hide Icon

If you don’t want to show the icon in BootstrapMsg, you can set Msg.iconEnabled = false;

Extra class

If you want to add an extra class to BootstrapMsg element just change Msg.extraClass to default, extra class.

Must Read: JavaScript Library for Simple and Lightweight Toast Popups | EggyJS

How to make use of it:

1. Add the jQuery library, Bootstrap framework, and the jQuery Bootstrap Msg plugin to your webpage.

<script src="//">
</script> <script src="dist/js/bootstrap-msg.min.js"></script>

2. Show a notification message on the webpage., type, timeout);

// or'info message', timeout);
Msg.success('success message', timeout);
Msg.warning('warning message', timeout);
Msg.error('error message', timeout);
Msg.danger('danger message', timeout);

3. Style the notification messages.

#msg {
  position: fixed;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 400px;
  top: -300px;
  left: 50%;
  margin-left: -200px;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;

#msg i {
  font-size: 20px;
  vertical-align: middle;

#msg span { font-size: 15px; }

#msg.showed {
  top: 50px;
  opacity: 1;
  filter: alpha(opacity=100);

@media (min-width: 1200px) {

#msg {
  width: 600px;
  margin-left: -300px;

@media (max-width: 479px) {

#msg {
  width: 300px;
  margin-left: -150px;

4. Use Font Awesome 4 icons instead of Bootstrap’s Glyphicons.

Msg.icon = {    
    info: 'fa fa-bath',
    success: 'fa fa-anchor',
    error: 'fa fa-close',
    warning: 'fa fa-bell-o',
    danger: 'fa fa-bolt'  


Must Read: Light, Easy and Beautiful Toast Notification Library | Vue Toastification

NameParams (ParamType: ParamName)Description
Msg.showString: type
String: message
Number: timeout
Show message. type can be infosuccesswarning or danger. If timeout is not set, will use the default timeout
Msg.infoString: message
Number: timeout
Shortcut of showMessage with type is info
Msg.successString: message
Number: timeout
Shortcut of showMessage with type is success
Msg.warningString: message
Number: timeout
Shortcut of showMessage with type is warning
Msg.errorString: message
Number: timeout
Alias of Msg.danger
Msg.dangerString: message
Number: timeout
Shortcut of showMessage with type is danger


Timeout for BootstrapMsg is available at Msg.timeout

Must Read: Interface to Perform A Video Player by Using the Bootstrap 5 Framework

TypeTimeout (in ms)
info5 * 1000
success5 * 1000
warning5 * 1000
danger5 * 1000


Icon for BootstrapMsg is available at Msg.icon

infofa fa-info-circle
successfa fa-check-circle
warningfa fa-exclamation-circle
dangerfa fa-times-circle

See Demo And Download


Official Website(ducdhm): Click Here

This superior jQuery/javascript plugin is developed by ducdhm. For extra Advanced Usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…