Bulma | Message
Bulma is a free and 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 Message component in Bulma provides colored box type placeholders to emphasize certain parts of the page. It includes several other components that can be added to design the content. These components are listed below:
- message-header: It holds the title of the message and delete element. It is an optional component.
- message-body: It holds the body of the message.
Example 1: This example shows creating a simple message using Bulma.
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 70px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message" > < div class = "message-header" > < p >w3wiki</ 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:
Example 2: This example shows creating different color message components using Bulma.
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 70px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message is-primary" > < div class = "message-header" > < p >w3wiki</ 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 class = "column is-4" > < article class = "message is-info" > < div class = "message-header" > < p >w3wiki</ 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:
Example 3:
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 70px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message is-link" > < div class = "message-header" > < p >w3wiki</ 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 class = "column is-4" > < article class = "message is-success" > < div class = "message-header" > < p >w3wiki</ 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:
Example 4:
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 70px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message is-warning" > < div class = "message-header" > < p >w3wiki</ 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 class = "column is-4" > < article class = "message is-danger" > < div class = "message-header" > < p >w3wiki</ 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:
Example 5: This example shows creating different sized message components using Bulma.
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 50px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message is-primary" > < div class = "message-header" > < p >w3wiki</ 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 class = "column is-4" > < article class = "message is-medium is-info" > < div class = "message-header" > < p >w3wiki</ 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 class = "column is-4" > < article class = "message is-large is-success" > < div class = "message-header" > < p >w3wiki</ 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:
Example 6: This example creating message components without header using Bulma.
html
<!DOCTYPE html> < html > < head > < title >Bulma Message</ title > <!-- Include Bulma CSS --> < link rel = 'stylesheet' href = 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css' > <!-- FontAwesome Library --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > <!-- Custom CSS --> < style > div.columns { margin-top: 50px; } </ style > </ head > < body > < div class = 'container has-text-centered' > < div class = 'columns is-mobile is-centered' > < div class = 'column is-4' > < article class = "message is-link" > < 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 class = "column is-4" > < article class = "message is-success" > < 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: