Open In App

Bulma Message Variables

Improve
Improve
Like Article
Like
Save
Share
Report

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. 

Variable Used:

Variable-Name Description Type         Value         Computed Value Computed Type
$message-background-color This variable is used to define the background color of the message.         variable
               
$background hsl(0, 0%, 96%) color
$message-radius This variable is used to define the radius of the radius. variable
 
$radius 4px size
$message-header-background-color This variable is used to define the background color of the message. variable
 
$text hsl(0, 0%, 29%) color
$message-header-color This variable is used to define the color of the header. variable
 
$text-invert #fff color
$message-header-weight This variable is used to define the weight of the header. variable
 
$weight-bold 700 font-weight
 
$message-header-padding This variable is used to define the padding to the header. size 0.75em 1em    
$message-header-radius This variable is used to define the radius of the header. variable $radius 4px size
 
$message-body-border-color This variable is used to define the border color of the message. variable $border hsl(0, 0%, 86%) color
$message-body-border-width This variable is used to define the width of the border of the message. size 0 0 0 4px    
$message-body-color This variable is used to define the color of the message. variable $text hsl(0, 0%, 29%) color
 
$message-body-padding This variable is used to define the padding of the message. size 1.25em 1.5em    
$message-body-radius This variable is used to define the radius of the message. variable $radius 4px size
$message-body-pre-background-color This variable is used to define the background color of the pre-message. variable
 
$scheme-main hsl(0, 0%, 100%) color
$message-body-pre-code-background-color This variable is used to define the background color of the body. string transparent    
$message-header-body-border-width This variable is used to define the width of the header body. string 0    
$message-colors This variable is used to define the color of the message. variable $colors Bulma colors map

Example 1: In the below code, we will make use of the above variable to modify the message.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
          
    <title>Bulma message variable</title>
   <!-- font-awesome cdn -->
   <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  
  
        <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>GeeksforGeeks</p>
                        <button class="delete" aria-label="delete">
                      </button>
                    </div>
                    <div class="message-body">
                        <strong>'GeeksforGeeks'</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 geeks
                         constituting of technology lovers and
                         computer science enthusiasts have been
                         constantly working in this direction.
                    </div>
                </article>
              </div>
           </div>
        </div>     
    </center>
</body>
</html>


SCSS Code:

$message-background-color:lightgreen;
.message-body{
   background-color:$message-background-color;
}

Compiled CSS Code:

.message-body {
 background-color: lightgreen; }

Output:

 

Example 2: In the below code, we will make use of the above variable to modify the message.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <link rel="stylesheet" href="style.css">
      
  
    <title>Bulma message variable</title>
   <!-- font-awesome cdn -->
   <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  
  
        <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>GeeksforGeeks</p>
                        <button class="delete" aria-label="delete">
                      </button>
                    </div>
                    <div class="message-body">
                        <strong>'GeeksforGeeks'</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 geeks
                         constituting of technology lovers and
                         computer science enthusiasts have been
                         constantly working in this direction.
                    </div>
                </article>
              </div>
           </div>
        </div>     
    </center>
</body>
</html>


SCSS Code:

 $message-header-weight:20px;
.message-body
{
  font-size:$message-header-weight;
}

Compiled CSS Code:

.message-body
{
   font-size: 20px; 
}

Output:

 

Reference: https://bulma.io/documentation/components/message/#variables



Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads