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:
<!DOCTYPE html> < html >
< head >
< title >Bulma Notification Light colors</ title >
<!-- Include Bulma CSS -->
< link rel = "stylesheet" href =
</ head >
< body >
< div class = 'content container has-text-justified' >
< div class = 'columns is-mobile is-centered' >
< div class = 'column is-8' >
< h1 class="has-text-success
has-text-centered">
GeeksforGeeks
</ h1 >
< h3 class = "has-text-centered" >
Bulma Notification Light colors
</ h3 >
< div class = "notification is-primary is-light" >
< button class = "delete" ></ button >
< strong >Primary Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
< div class = "notification is-link is-light" >
< button class = "delete" ></ button >
< strong >Link Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
< div class = "notification is-info is-light" >
< button class = "delete" ></ button >
< strong >Info Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
< div class = "notification is-success is-light" >
< button class = "delete" ></ button >
< strong >Success Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
< div class = "notification is-warning is-light" >
< button class = "delete" ></ button >
< strong >Warning Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
< div class = "notification is-danger is-light" >
< button class = "delete" ></ button >
< strong >Danger Light Notification
Color: 'GeeksforGeeks'</ strong > is
a computer science portal. It was
created with a goal in mind to
provide well written, well thought
and well explained solutions for
selected questions. The core team
of five super geeks constituting
of technology lovers and computer
science enthusiasts have been
constantly working in this direction.
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://bulma.io/documentation/elements/notification/#light-colors