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.
Message Parts:
- message container
- message header
- message body
Bulma Message Sizes are used to create message components in different sizes. You can add one of the three modifiers to the message component to create different size messages.
Bulma Message Size Classes:
- is-small: This class is used to create a small-size message component. This class is used with the message class.
- is-medium: This class is used to create medium size message components. This class is used with the message class.
- is-large: This class is used to create a large-size message component. This class is used with the message class.
Note: If we will not use the message size class, then it will create the default normal size message component.
Syntax:
<article class="message is-small">
<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 Sizes</title>
<!-- Include Bulma CSS -->
<link rel='stylesheet' href=
<!-- FontAwesome Library -->
<script src=
</script>
</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 Message Sizes
</h3>
<article class="message is-small">
<div class="message-header">
<p>Web Technology (Small Size Message)</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>Web Technology</strong> refers
to the various tools and techniques
that are utilized in the process of
communication between different types
of devices over the internet.
</div>
</article>
<article class="message is-medium">
<div class="message-header">
<p>Web Technology (Medium Size Message)</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>Web Technology</strong> refers
to the various tools and techniques
that are utilized in the process of
communication between different types
of devices over the internet.
</div>
</article>
<article class="message is-large">
<div class="message-header">
<p>Web Technology (Large Size Message)</p>
<button class="delete" aria-label="delete">
</button>
</div>
<div class="message-body">
<strong>Web Technology</strong> refers
to the various tools and techniques
that are utilized in the process of
communication between different types
of devices over the internet.
</div>
</article>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/components/message/#sizes