In this guide, we will discuss Message in Bulma.
Description
Bulma provides message blocks to enhance the look of your page by using the message class in the article tag. Bulma also allows changing 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 on 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>
In the above example, we have used only is-primary, is-link, is-info modifiers. If you want to use the remaining modifiers, then use those modifiers along with the 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>
Message Block Sizes
You can change the size of the 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>
Next Topic : Click Here
Pingback: Bulma - Components | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Dropdown | Adglob Infosystem Pvt Ltd