Bulma Notification Manager In JavaScript – bulma-notifications.js

Category: Javascript , Notification | May 5, 2020
Views Total:1,403 views
Official Page:Go to website
Last Update:May 5, 2020


Bulma Notification Manager In JavaScript – bulma-notifications.js


bulma-notifications.js is a JavaScript library to create toast-style notification blocks using the Bulma CSS framework.

How to use it:

1. Load the latest Bulma CSS framework from a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@latest/css/bulma.min.css" />

2. Load the bulma-notifications’ stylesheet in the header.

<link rel="stylesheet" href="./style.css" />

3. Import the BulmaNotification as a module.

import BulmaNotification from './bulma-notifications.js';

4. Create a basic Bulma notification.

let notif = new BulmaNotification();
notif.show("Notification Title", "Notification Message");

5. Set the notification type:

  • primary
  • link
  • info
  • success
  • warning
  • danger
notif.show("Notification Title", "Notification Message", "danger");

6. Determine the time to wait before auto dismissing the notification block. Default: 3000ms.

notif.show("Notification Title", "Notification Message", "danger", 5000);

You Might Be Interested In:

Leave a Reply