Skip to content
Related Articles

Related Articles

Bulma Title Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Jul, 2022
View Discussion
Improve Article
Save Article

Bulma is a free and open-source CSS framework that can be used as an alternative to Bootstrap. 

In this article, we will discuss the Bulma title. The Bulma title is to provide the main heading of our application. We can also change the size, and color of the title. You can check out the Bulma title sizes to know about how to use Bulma title sizes in your web applications. 

Classes Used:

  • title: This class is used for adding the heading as the main title in your web application.

Syntax:

<h1 class="title">....</h1>

Variables:

Name Description Type Value Computed Value Computed Type
$title-color It is used to color the title. variable $text-strong hsl(0, 0%, 21%) color
$title-family It is a boolean variable that is used for fonts. boolean false    
$title-size It is used to define the size of the title. variable $size-3 2rem size
$title-weight It is used to define the weight of the title. variable $weight-semibold 600 font-weight
$title-line-height It is used to define the height of the line. unitless 1.125    
$title-strong-color It is used to make the title bold. string inherit    
$title-strong-weight It is used to define the boldness and weight of the title. string inherit    
$title-sub-size It is used to define the sub-size of the title. size 0.75em    
$title-sup-size It is used to define the sup size of the title. size 0.75em    
$subtitle-color It is used to provide the color of the subtitle. variable $text hsl(0, 0%, 29%) color
$subtitle-family It is used to define the font family of the subtitle. boolean false    
$subtitle-size It is used to define the size of the subtitle. variable $size-5 1.25rem size
$subtitle-weight It is used to define the weight of the subtitle. variable $weight-normal 400 font-weight
$subtitle-line-height It is used to define the line height of the subtitle. unitless 1.25    
$subtitle-strong-color It is used to provide color and highlight the subtitle. variable $text-strong hsl(0, 0%, 21%) color
$subtitle-strong-weight It is used to provide weight and highlight the subtitle. variable $weight-semibold 600 font-weight
$subtitle-negative-margin is used to define the negative margin of the subtitle. size -1.25rem    

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the title variables.

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 Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title" style="font-size:40px;">
            GeeksforGeeks
        </h1>
          
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>
  
</html>


SCSS code:

$title-color: green;
.title{
    color:$title-color;
}

Compiled CSS code:

.title {
     color: green; 
}

Output: 

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the title variables.

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 Variable</title>
</head>
  
<body>
    <center>
        <h1 class="title">
            GeeksforGeeks
        </h1>
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>
    </center>
</body>
  
</html>


SCSS code:

$title-size: 60px;
$title-color:green;
.title{
       font-size:$title-size;
       color:$title-color;
}

Compiled CSS code:

.title {
     font-size: 60px;
     color: green; 
}

Output:

 

Reference: https://bulma.io/documentation/elements/title/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!