Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

👁 Route Planner and Route Optimizer

Notification

Bold notification blocks, to alert your users of something

👁 CSS Masterclass

The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the delete element.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum efficitur.

HTML

<div class="notification">
 <button class="delete"></button>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
 <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
 nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
 et dictum <a>felis venenatis</a> efficitur.
</div>

Colors #

The notification element is available in all the different colors defined by the .

Example

Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum efficitur.

HTML

<div class="notification is-link">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-primary">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-info">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-success">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-warning">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-danger">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Light colors #

Each color also comes in its light version. Simply append the is-light modifier to obtain the light version of the notification.

Example

HTML

<div class="notification is-link is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-primary is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-info is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-success is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-warning is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

Example

HTML

<div class="notification is-danger is-light">
 <button class="delete"></button>
 Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
 dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
 nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
 diam, et dictum <a>felis venenatis</a> efficitur.
</div>

JavaScript example #

The Bulma package does not come with any JavaScript. Here is however an implementation example, which sets the click handler for Bulma delete elements, anywhere on the page, in vanilla JavaScript.

<div class="notification">
 <button class="delete"></button>
 Lorem ipsum
</div>

document.addEventListener('DOMContentLoaded', () => {
 (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
 const $notification = $delete.parentNode;

 $delete.addEventListener('click', () => {
 $notification.parentNode.removeChild($notification);
 });
 });
});

Sass and CSS variables #

Sass Variable	CSS Variable	Value
`$notification-code-background-color`	`var(--bulma-notification-code-background-color)`	`var(--bulma-scheme-main)`
`$notification-radius`	`var(--bulma-notification-radius)`	`var(--bulma-radius)`
`$notification-padding`	`var(--bulma-notification-padding)`	`1.375em 1.5em`

Sass Variable

CSS Variable

Value

$notification-code-background-color

var(--bulma-notification-code-background-color)

var(--bulma-scheme-main)

$notification-radius

var(--bulma-notification-radius)

var(--bulma-radius)

$notification-padding

var(--bulma-notification-padding)

1.375em 1.5em

URL: https://bulma.io/documentation/elements/notification/

⇱ Notification | Bulma: Free, open source, and modern CSS framework based on Flexbox

👁 Image

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Notification

Bold notification blocks, to alert your users of something

Colors #

Light colors #

JavaScript example #

Sass and CSS variables #

How to support Bulma