PHPackages the-muda-organization/notify-bootstrap - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Mail & Notifications](/categories/mail) 4. / 5. the-muda-organization/notify-bootstrap ActiveLibrary[Mail & Notifications](/categories/mail) the-muda-organization/notify-bootstrap ====================================== Stylish and modern toast notifications based on Bootstrap 5 and Font Awesome v1.0.0(5y ago)86854[1 PRs](https://github.com/the-muda-organization/notify-bootstrap/pulls)MITHTML Since Oct 19Pushed 4y ago3 watchersCompare [ Source](https://github.com/the-muda-organization/notify-bootstrap)[ Packagist](https://packagist.org/packages/the-muda-organization/notify-bootstrap)[ RSS](/packages/the-muda-organization-notify-bootstrap/feed)WikiDiscussions master Synced 2d ago READMEChangelog (1)DependenciesVersions (2)Used By (0) ❗❗❗ **Bootstrap 5 update coming soon!**❗❗❗ --- Notify Bootstrap ================ [](#notify-bootstrap) Stylish and modern notifications - small jQuery plugin based on Bootstrap and Font Awesome New version based on Bootstrap 5 coming soon! --- Status ------ [](#status) [![GitHub Version](https://camo.githubusercontent.com/0b7e5b62194084d95a38d73e35e01ecf403c333b6c7f6f86a7f39fcc2af5dd3c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/notify-bootstrap)[![License](https://camo.githubusercontent.com/123eff3938c2cbf7ff7997f99606d7fda015a5a04e3c7b150e2dc87a35ea5327/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/notify-bootstrap) [![Github Star](https://camo.githubusercontent.com/8bc43dd32ea7f8219d6f45d494d7b28b06549ad31fe5a5471ed5364db310bf77/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/notify-bootstrap)[![Github Fork](https://camo.githubusercontent.com/acaedbfb72c6c2f916e454866a375e7b23aa56d7aaf752e55544a9c592594e49/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702e7376673f7374796c653d666f722d7468652d6261646765)](https://github.com/the-muda-organization/notify-bootstrap) [![CSS gzip size](https://camo.githubusercontent.com/5392bdf9738736948cffdd1206e50c29260234d82dcbd40d267479590e9dd441/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702f6d61737465722f646973742f6373732f6e6f746966792e6d696e2e6373733f636f6d7072657373696f6e3d677a6970266c6162656c3d4353532b677a69702b73697a65)](https://github.com/the-muda-organization/notify-bootstrap/blob/master/dist/css/notify.min.css)[![JS gzip size](https://camo.githubusercontent.com/a0533a94e591d430e5c6fdd7c2cb260e7e3dfdf3878af93d1b79a5a59398b870/68747470733a2f2f696d672e626164676573697a652e696f2f7468652d6d7564612d6f7267616e697a6174696f6e2f6e6f746966792d626f6f7473747261702f6d61737465722f646973742f6a732f6e6f746966792e6d696e2e6a733f636f6d7072657373696f6e3d677a6970266c6162656c3d4a532b677a69702b73697a65)](https://github.com/the-muda-organization/notify-bootstrap/blob/master/dist/js/notify.min.js) --- [View DEMO](https://rawcdn.githack.com/the-muda-organization/notify-bootstrap/f50ebe8ffebfefcdea13c7615d8f1294df68f528/DEMO.html) --------------------------------------------------------------------------------------------------------------------------------- [](#view-demo) --- [![](https://github.com/the-muda-organization/notify-bootstrap/raw/master/PREVIEW.jpg?raw=true)](https://github.com/the-muda-organization/notify-bootstrap/blob/master/PREVIEW.jpg?raw=true) --- Table of contents ----------------- [](#table-of-contents) - [Status](#status) - [Quick Start](#quick-start) - [What's included](#whats-included) - [Bugs and feature requests](#bugs-and-feature-requests) - [Installation](#installation) - [How to Use](#how-to-use) - [Features](#features) - [CSS Classes](#css-classes) - [Javascript customize](#javascript-customize) - [Versioning](#versioning) - [Changelog](#changelog) - [Team](#team) - [Code of Conduct](#code-of-conduct) - [Copyright and License](#copyright-and-license) --- Quick Start ----------- [](#quick-start) Several options are available: - [Download the latest release.](https://github.com/the-muda-organization/notify-bootstrap/archive/master.zip) - Clone the repo: `git clone https://github.com/the-muda-organization/notify-bootstrap.git` - Install with [Composer](https://getcomposer.org/): `composer require the-muda-organization/notify-bootstrap` What's included --------------- [](#whats-included) Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: There are several dependencies. See below for [Installation Guide](#installation) and [How to Use](#how-to-use) ``` notify-bootstrap/ │ └─ dist/ │ ├── css/ │ ├── notify.css │ └── notify.min.css │ └── js/ ├── notify.js └── notify.min.js ``` --- Bugs and feature requests ------------------------- [](#bugs-and-feature-requests) Have a bug or a feature request? Before opening a new issue search for existing and closed issues. If your problem or idea is not addressed yet, [open a new issue](https://github.com/the-muda-organization/notify-bootstrap/issues/new). --- Installation ------------ [](#installation) 1. [Download](https://github.com/the-muda-organization/notify-bootstrap/archive/master.zip) and copy files to your project 2. INSTALL DEPENDENCIES: - Bootstrap CSS (required) - Bootstrap JS (popper.js NOT required) - Font Awesome (recommended - however you can easily customize with your icon set) 3. You can easily customize CSS and JS (colors, position, time notification is visible, brand icons etc) 4. Add CSS and JS to your project: ``` ``` --- How to Use ---------- [](#how-to-use) Notify is easy to use. Call the function and provide type, title and message: ``` notify(type, title, message); ``` Example with jQuery: ``` $('#button-1').on('click',function(){ notify('bell','Title of the message!','This is a sample message! Lorem ipsum!'); }); ``` Example with javascript: ``` myElement.addEventListener('click',function(){ notify('shield-check','Title of the message!','This is a sample message! Lorem ipsum!'); }); ``` Notify has a style independend from Bootstrap toast. You can use notify and bootstrap toast component at the same time. Notify javascript rely 100% on Bootstrap. [Check out bootstrap toast component](https://getbootstrap.com/docs/4.5/components/toasts/#javascript-behavior) --- Features -------- [](#features) #### Position: [](#position) set in CSS at Line 13 & 14. Use `top:0` or `bottom:0` AND `left:0` or `right:0` #### Type: [](#type) You can add as many types as you need and each type can have custom style. Type is required. If you leave it empty no icon will be displayed but you will see a placeholder from Font Awesome indicating incorrect icon. Notify has a few types added as default in several categories: ``` GENERAL: - info - warning - error - success - other BRANDS: - facebook - github - instagram - linkedin - paypal - skype - twitter - wikipedia - youtube CUSTOM: - spinner FONT AWESOME: - Any icon can be added. Just use icon name as type: 'times', 'ban', 'user' etc. - If you want to use other icon type (regular, duotone, light or brand) change line 53 in js file. ``` To add more types add new `case 'newCustomType':` in javascript switch with custom icon and set custom CSS as `.toast[data-type="newCustomType"]{}` #### Title: [](#title) Anything can be added as title but text is recommended. Title CAN be empty. #### Message: [](#message) Anything can be added as message but text is recommended. Message as well as title CAN be empty. #### Autohide: [](#autohide) Notification can hide when you click the close button or after a period of time. ``` Notify JS Line 60 - autohide - set true or false Notify JS Line 61 - custom time to hide notification. Currently it's 5000ms. ``` #### Animation: [](#animation) There is no custom animation. Notify uses Bootstrap to show and hide toasts. Feel free to add your own. #### Custom toast: [](#custom-toast) Notify uses custom CSS so it is possible to use Bootstrap. All custom style is based on `[data-type]` as type should be declared in each notification. #### Custom Features: [](#custom-features) Notify has only basic options so you can easily customize all the code. You can add custom timing for each notification, images, buttons with links, anything you want. In Notify Line 7 just add more event objects and call them with `notify();` function! --- CSS Classes ----------- [](#css-classes) CSS classExplanation`.toast-container`main container for stacking toasts. Set position here.`.toast`toast - override from bootstrap`.toast[data-type]`toast - style for notify not affecting bootstrap toast`.toast[data-type] .toast-content`toast content`.toast[data-type] .toast-icon svg`toast svg icon`.toast[data-type] .toast-body`toast body - it contains title and message`.toast[data-type] .toast-body strong`toast title`.toast[data-type] .toast-body div`toast message`.toast[data-type] .close`toast close button`.toast[data-type="XXXXXXX"]`custom style for a specific notification type (success, error, info etc)--- Javascript customize -------------------- [](#javascript-customize) - **Line 25** - close button svg - now it's Font Awesome `fas fa-times` icon - **Lines 29-54** - Icons for different notification type (success, error, info, brands etc). Font Awesome icons are inlined so they are displayed properly and without delay. - **Line 53** - You can change default Font Awesome icon style (solid, regular, light, duotone, brands) - **Line 61** - Set `autohide (true|false)` if you want notification to hide after some time - **Line 61** - Set your own time how long notification should be visible. Currently it is `5000ms`. - **Line 67** - It contains toast content template --- Versioning ---------- [](#versioning) Notify Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format: `..` --- Changelog --------- [](#changelog) For last releases see detailed [CHANGELOG](https://github.com/the-muda-organization/notify-bootstrap/blob/master/CHANGELOG.md). --- Team ---- [](#team) - [Jakub Muda](https://github.com/jakubmuda) --- Code of conduct --------------- [](#code-of-conduct) We will behave ourselves if you behave yourselves. For more details see our [CODE\_OF\_CONDUCT.md](https://github.com/the-muda-organization/notify-bootstrap/blob/master/CODE_OF_CONDUCT.md). --- Copyright and license --------------------- [](#copyright-and-license) Code and documentation copyright 2017-2020 [The MUDA Organization](https://muda.pl). Code released under the [MIT License](https://github.com/the-muda-organization/notify-bootstrap/blob/master/LICENSE). --- ### Health Score 30 — LowBetter than 62% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity24 Limited adoption so far Community11 Small or concentrated contributor base Maturity54 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 2080d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/40349972?v=4)[Jakub Muda](/maintainers/jakubmuda)[@jakubmuda](https://github.com/jakubmuda) --- Top Contributors [![jakubmuda](https://avatars.githubusercontent.com/u/40349972?v=4)](https://github.com/jakubmuda "jakubmuda (60 commits)") --- Tags bootstrapcssjavascriptjavascript-librarynotificationsnotifytoasttoast-notificationscssnotificationsjquerybootstrapnotifytoasttoast-notificationsmuda ### Embed Badge ![Health badge](/badges/the-muda-organization-notify-bootstrap/health.svg) ``` [![Health](https://phpackages.com/badges/the-muda-organization-notify-bootstrap/health.svg)](https://phpackages.com/packages/the-muda-organization-notify-bootstrap) ``` ### Alternatives [mouse0270/bootstrap-growl This is a simple pluging that turns standard Bootstrap alerts into "Growl-like" notifications. 2.2k126.5k](/packages/mouse0270-bootstrap-growl)[sciactive/pnotify Beautiful JavaScript notifications. 3.6k6.8k](/packages/sciactive-pnotify)[ifightcrime/bootstrap-growl Pretty simple jQuery plugin that turns standard Bootstrap alerts into 'Growl-like' notifications. 80013.0k](/packages/ifightcrime-bootstrap-growl)[kartik-v/yii2-widget-growl A widget to generate growl based notifications using bootstrap-growl plugin (sub repo split from yii2-widgets) 384.3M14](/packages/kartik-v-yii2-widget-growl)[kartik-v/yii2-widget-alert A widget to generate alert based notifications using bootstrap-alert plugin (sub repo split from yii2-widgets) 284.2M24](/packages/kartik-v-yii2-widget-alert)[ascsoftw/livewire-toast Livewire Package to display Toast Notifications 48545.1k1](/packages/ascsoftw-livewire-toast) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)