Bulma Message Colors
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 Bulma Message component is used to provide the colored message blocks to emphasize part of the page. It is a multipart component.
It contains mainly three parts that are –
- message container
- message header
- message body
Bulma Message Color Feature is used to add the different colors to the message component. The classes used for color features are given below:
- is-dark: This class used to set the color of the message container to dark brown.
- is-primary: This class is used to set the color of the message container to light cyan.
- is-link: This class is used to set the color of the message container to blue.
- is-info: This class is used to set the color of the message container to light blue.
- is-success: This class is used to set the color of the message container to green.
- is-warning: This class is used to set the color of the message container to yellow.
- is-danger: This class is used to set the color of the message container to red.
Syntax:
<article class="message is-dark"> <div class="message-header"> <!-- Message header content --> </div> <div class="message-body"> <!-- Message body content --> </div> </article>
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Bulma Message Colors</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > </ 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">w3wiki </ h1 > < h3 class = "has-text-centered" > Bulma Message Colors </ h3 > < article class = "message is-dark" > < div class = "message-header" > < p >w3wiki - Dark Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-primary" > < div class = "message-header" > < p >w3wiki - Primary Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-link" > < div class = "message-header" > < p >w3wiki - Link Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-info" > < div class = "message-header" > < p >w3wiki - Info Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-success" > < div class = "message-header" > < p >w3wiki - Success Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-warning" > < div class = "message-header" > < p >w3wiki - Warning Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > < article class = "message is-danger" > < div class = "message-header" > < p >w3wiki - Danger Message Color</ p > < button class = "delete" aria-label = "delete" > </ button > </ div > < div class = "message-body" > < strong >'w3wiki'</ 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 Beginner constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </ div > </ article > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/components/message/#colors