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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<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:
