Bulma Message Sizes

Last Updated : 30 Jan, 2022

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= 
'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> 
</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>