- Bulma Tutorial
- Bulma - Home
- Bulma - Introduction
- Bulma - Overview
- Bulma - Modifiers
- Bulma - Columns
- Bulma - Layout
- Bulma - Form
- Bulma - Elements
- Bulma - Components
- Bulma Useful Resources
- Bulma - Quick Guide
- Bulma - Resources
- Bulma - Discussion
Bulma - Message
Description
Bulma provides message blocks to enhance look of your page by using the message class in the article tag. Bulma also allows to change message box colors with different types of modifiers such as is-dark, is-primary, is-link, is-info, is-success, is-warning, is-danger.
The below example shows displaying of message in the page −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Message Block
</span>
<br>
<br>
<article class = "message">
<div class = "message-header">
<p>Basic Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<br>
<br>
<span class = "title">
Message Block Colors
</span>
<br>
<br>
<article class = "message is-primary">
<div class = "message-header">
<p>Primary Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-header">
<p>Link Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text .This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-header">
<p>Info Message Box</p>
<button class = "delete" aria-label="delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>
It displays the below output −
In the above example, we have used only is-primary, is-link, is-info modifiers. If you want use remaining modifiers, then use those modifiers along with message class in the article tag.
Message Body
You can display only message body without including message-header modifier as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Message Body
</span>
<br>
<br>
<article class = "message">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-primary">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>
It displays the below output −
Message Block Sizes
You can change the size of message box by using is-small, is-medium, is-large modifiers as shown in the below example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "title">
Message Block Sizes
</span>
<br>
<br>
<article class = "message is-small">
<div class = "message-header">
<p>Small Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-medium">
<div class = "message-header">
<p>Medium Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-large">
<div class = "message-header">
<p>Large Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>
Execute the above code and you will get the below output −
bulma_components.htm
Advertisements