{"id":39450631,"url":"https://github.com/the-muda-organization/notify-bootstrap","last_synced_at":"2026-01-18T04:28:48.130Z","repository":{"id":53119221,"uuid":"202459491","full_name":"the-muda-organization/notify-bootstrap","owner":"the-muda-organization","description":"Stylish and modern toast notifications based on Bootstrap 5 and Font Awesome","archived":false,"fork":false,"pushed_at":"2022-01-03T04:34:26.000Z","size":1571,"stargazers_count":8,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-01-15T09:53:21.191Z","etag":null,"topics":["bootstrap","css","javascript","javascript-library","notifications","notify","toast","toast-notifications"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/the-muda-organization.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-15T02:26:59.000Z","updated_at":"2023-05-18T00:36:15.000Z","dependencies_parsed_at":"2022-08-19T00:52:54.827Z","dependency_job_id":null,"html_url":"https://github.com/the-muda-organization/notify-bootstrap","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/the-muda-organization/notify-bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-muda-organization%2Fnotify-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-muda-organization%2Fnotify-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-muda-organization%2Fnotify-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-muda-organization%2Fnotify-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/the-muda-organization","download_url":"https://codeload.github.com/the-muda-organization/notify-bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/the-muda-organization%2Fnotify-bootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28529603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","javascript","javascript-library","notifications","notify","toast","toast-notifications"],"created_at":"2026-01-18T04:28:48.070Z","updated_at":"2026-01-18T04:28:48.119Z","avatar_url":"https://github.com/the-muda-organization.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":":exclamation::exclamation::exclamation: **Bootstrap 5 update coming soon!**:exclamation::exclamation::exclamation:\n********************************************************************************\n# Notify Bootstrap\nStylish and modern notifications - small jQuery plugin based on Bootstrap and Font Awesome\n\nNew version based on Bootstrap 5 coming soon!\n\n********************************************************************************\n## Status\n[![GitHub Version](https://img.shields.io/github/release/the-muda-organization/notify-bootstrap.svg?style=for-the-badge)](https://github.com/the-muda-organization/notify-bootstrap)\n[![License](https://img.shields.io/github/license/the-muda-organization/notify-bootstrap.svg?style=for-the-badge)](https://github.com/the-muda-organization/notify-bootstrap)\n\n\n[![Github Star](https://img.shields.io/github/stars/the-muda-organization/notify-bootstrap.svg?style=for-the-badge)](https://github.com/the-muda-organization/notify-bootstrap)\n[![Github Fork](https://img.shields.io/github/forks/the-muda-organization/notify-bootstrap.svg?style=for-the-badge)](https://github.com/the-muda-organization/notify-bootstrap)\n\n[![CSS gzip size](https://img.badgesize.io/the-muda-organization/notify-bootstrap/master/dist/css/notify.min.css?compression=gzip\u0026label=CSS+gzip+size)](https://github.com/the-muda-organization/notify-bootstrap/blob/master/dist/css/notify.min.css)\n[![JS gzip size](https://img.badgesize.io/the-muda-organization/notify-bootstrap/master/dist/js/notify.min.js?compression=gzip\u0026label=JS+gzip+size)](https://github.com/the-muda-organization/notify-bootstrap/blob/master/dist/js/notify.min.js)\n\n\n********************************************************************************\n## [View DEMO](https://rawcdn.githack.com/the-muda-organization/notify-bootstrap/f50ebe8ffebfefcdea13c7615d8f1294df68f528/DEMO.html)\n********************************************************************************\n\n\u003cimg src=\"https://github.com/the-muda-organization/notify-bootstrap/blob/master/PREVIEW.jpg?raw=true\" alt=\"\" style=\"width:100%;display:block;\"\u003e\n\n\n********************************************************************************\n## Table of contents\n- [Status](#status)\n- [Quick Start](#quick-start)\n- [What's included](#whats-included)\n- [Bugs and feature requests](#bugs-and-feature-requests)\n- [Installation](#installation)\n- [How to Use](#how-to-use)\n- [Features](#features)\n- [CSS Classes](#css-classes)\n- [Javascript customize](#javascript-customize)\n- [Versioning](#versioning)\n- [Changelog](#changelog)\n- [Team](#team)\n- [Code of Conduct](#code-of-conduct)\n- [Copyright and License](#copyright-and-license)\n\n\n********************************************************************************\n## Quick Start\n\nSeveral options are available:\n- [Download the latest release.](https://github.com/the-muda-organization/notify-bootstrap/archive/master.zip)\n- Clone the repo: `git clone https://github.com/the-muda-organization/notify-bootstrap.git`\n- Install with [Composer](https://getcomposer.org/): `composer require the-muda-organization/notify-bootstrap`\n\n\n## What's included\nWithin 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:\n\nThere are several dependencies. See below for [Installation Guide](#installation) and [How to Use](#how-to-use)\n```\nnotify-bootstrap/\n │\n └─ dist/\n    │\n    ├── css/\n    │   ├── notify.css\n    │   └── notify.min.css\n    │\n    └── js/\n        ├── notify.js\n        └── notify.min.js\n```\n\n\n********************************************************************************\n## Bugs and feature requests\nHave 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).\n\n\n********************************************************************************\n## Installation\n\n1. [Download](https://github.com/the-muda-organization/notify-bootstrap/archive/master.zip) and copy files to your project\n2. INSTALL DEPENDENCIES:\n    - Bootstrap CSS (required)\n    - Bootstrap JS  (popper.js NOT required)\n    - Font Awesome  (recommended - however you can easily customize with your icon set)\n3. You can easily customize CSS and JS (colors, position, time notification is visible, brand icons etc)\n4. Add CSS and JS to your project:\n```html\n    \u003clink href=\"https://example.com/notify-bootstrap/1.x.x/css/notify.min.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"https://example.com/notify-bootstrap/1.x.x/js/notify.min.js\"\u003e\u003c/script\u003e\n```\n\n\n********************************************************************************\n## How to Use\n\nNotify is easy to use. Call the function and provide type, title and message:\n```js\nnotify(type, title, message);\n```\n\nExample with jQuery:\n```js\n$('#button-1').on('click',function(){\n    notify('bell','Title of the message!','This is a sample message! Lorem ipsum!');\n});\n```\n\nExample with javascript:\n```js\nmyElement.addEventListener('click',function(){\n    notify('shield-check','Title of the message!','This is a sample message! Lorem ipsum!');\n});\n```\n\nNotify has a style independend from Bootstrap toast. You can use notify and bootstrap toast component at the same time.\n\nNotify javascript rely 100% on Bootstrap. [Check out bootstrap toast component](https://getbootstrap.com/docs/4.5/components/toasts/#javascript-behavior)\n\n\n********************************************************************************\n## Features\n\n#### Position:\nset in CSS at Line 13 \u0026 14. Use ``top:0`` or ``bottom:0`` AND ``left:0`` or ``right:0``\n\n\n#### Type:\nYou can add as many types as you need and each type can have custom style.\n\nType is required. If you leave it empty no icon will be displayed but you will see a placeholder from Font Awesome indicating incorrect icon.\n\nNotify has a few types added as default in several categories:\n\n    GENERAL:\n    - info\n    - warning\n    - error\n    - success\n    - other\n    \n    BRANDS:\n    - facebook\n    - github\n    - instagram\n    - linkedin\n    - paypal\n    - skype\n    - twitter\n    - wikipedia\n    - youtube\n    \n    CUSTOM:\n    - spinner\n    \n    FONT AWESOME:\n    - Any icon can be added. Just use icon name as type: 'times', 'ban', 'user' etc.\n    - If you want to use other icon type (regular, duotone, light or brand) change line 53 in js file.\n\n\nTo add more types add new ``case 'newCustomType':`` in javascript switch with custom icon and set custom CSS as ``.toast[data-type=\"newCustomType\"]{}``\n\n#### Title:\nAnything can be added as title but text is recommended. Title CAN be empty.\n\n#### Message:\nAnything can be added as message but text is recommended. Message as well as title CAN be empty.\n\n#### Autohide:\nNotification can hide when you click the close button or after a period of time.\n\n    Notify JS Line 60 - autohide - set true or false\n    Notify JS Line 61 - custom time to hide notification. Currently it's 5000ms.\n\n#### Animation:\nThere is no custom animation. Notify uses Bootstrap to show and hide toasts. Feel free to add your own.\n\n#### Custom toast:\nNotify 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.\n\n\n#### Custom Features:\nNotify 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.\nIn Notify Line 7 just add more event objects and call them with ``notify();`` function!\n\n\n********************************************************************************\n## CSS Classes\n\nCSS class                                   | Explanation\n------------------------------------------- | -------------------------------------------\n``.toast-container``                        | main container for stacking toasts. Set position here.\n``.toast``                                  | toast - override from bootstrap\n``.toast[data-type]``                       | toast - style for notify not affecting bootstrap toast\n``.toast[data-type] .toast-content``        | toast content\n``.toast[data-type] .toast-icon svg``       | toast svg icon\n``.toast[data-type] .toast-body``           | toast body - it contains title and message\n``.toast[data-type] .toast-body strong``    | toast title\n``.toast[data-type] .toast-body div``       | toast message\n``.toast[data-type] .close``                | toast close button\n``.toast[data-type=\"XXXXXXX\"]``             | custom style for a specific notification type (success, error, info etc)\n\n\n********************************************************************************\n## Javascript customize\n\n- **Line 25** - close button svg - now it's Font Awesome ``fas fa-times`` icon\n- **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.\n- **Line 53** - You can change default Font Awesome icon style (solid, regular, light, duotone, brands)\n- **Line 61** - Set ``autohide (true|false)`` if you want notification to hide after some time\n- **Line 61** - Set your own time how long notification should be visible. Currently it is ``5000ms``.\n- **Line 67** - It contains toast content template\n\n\n********************************************************************************\n## Versioning\nNotify Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:\n```\u003cmajor\u003e.\u003cminor\u003e.\u003cpatch\u003e```\n\n\n********************************************************************************\n## Changelog\nFor last releases see detailed [CHANGELOG](https://github.com/the-muda-organization/notify-bootstrap/blob/master/CHANGELOG.md).\n\n\n********************************************************************************\n## Team\n-  [Jakub Muda](https://github.com/jakubmuda)\n\n\n********************************************************************************\n## Code of conduct\nWe will behave ourselves if you behave yourselves. For more details see our\n[CODE_OF_CONDUCT.md](https://github.com/the-muda-organization/notify-bootstrap/blob/master/CODE_OF_CONDUCT.md).\n\n\n********************************************************************************\n## Copyright and license\nCode and documentation copyright 2017-2020 [The MUDA Organization](https://muda.pl).\n\nCode released under the [MIT License](https://github.com/the-muda-organization/notify-bootstrap/blob/master/LICENSE).\n\n\n********************************************************************************\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-muda-organization%2Fnotify-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthe-muda-organization%2Fnotify-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthe-muda-organization%2Fnotify-bootstrap/lists"}