VOOZH about

URL: https://www.geeksforgeeks.org/css/bulma-notification-light-colors/

⇱ Bulma Notification Light colors - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bulma Notification Light colors

Last Updated : 2 Mar, 2022

Bulma is a free, open-source CSS framework based on Flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The notification is a simple colored block that draws the attention of the user to something. It can be used as a pinned notification in the corner of the viewport. It supports the use of the delete element.

Bulma Notification Light Color Feature is used to add the light color versions to the notification element. 

Bulma Notification Light Color Class:

  • is-primary: This class is used to set the color of the notification element to light cyan.
  • is-link: This class is used to set the color of the notification element to blue.
  • is-info: This class is used to set the color of the notification element to light blue.
  • is-success: This class is used to set the color of the notification element to green.
  • is-warning: This class is used to set the color of the notification element to yellow.
  • is-danger: This class is used to set the color of the notification element to red.

Syntax:

<div class="notification is-primary is-light">
 <button class="delete"></button>
 <!-- Notification content --> 
</div>

Example:

Output:

👁 Image

Reference: https://bulma.io/documentation/elements/notification/#light-colors

Comment
Article Tags: