Bulma Title

Last Updated : 13 Feb, 2022

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, color of the tile. You can check out the Bulma Title sizes to know about how to use Bulma title sizes in your web applications. Below the title, the class is discussed with their examples.

Bulma Title class

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

Syntax:

<h1 class="title"> Your Title </h1>

Example 1: Below example illustrates the Bulma title class with different colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>GeeksforGeeks</title> 
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
</head> 
<body> 
    <div class="container content has-text-centered"> 
        <h1 class="title has-text-success">GeeksforGeeks</h1> 
        <h1 class="title has-text-info">GeeksforGeeks</h1> 
        <h1 class="title has-text-danger">GeeksforGeeks</h1> 
        <h1 class="title has-text-primary">GeeksforGeeks</h1> 
        <h1 class="title has-text-dark">GeeksforGeeks</h1> 
        <h1 class="title has-text-warning">GeeksforGeeks</h1> 
    </div> 
</body> 
</html>

Output:

Example 2: Below example illustrates the Bulma till class of different sizes and colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>GeeksforGeeks</title> 
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    /> 
</head> 
<body> 
    <div class="container content has-text-centered"> 
        <h1 class="title has-text-warning">GeeksforGeeks</h1> 
        <h2 class="title has-text-info">GeeksforGeeks</h2> 
        <h3 class="title has-text-danger">GeeksforGeeks</h3> 
        <h4 class="title has-text-primary">GeeksforGeeks</h4> 
        <h5 class="title has-text-dark">GeeksforGeeks</h5> 
        <h6 class="title has-text-success">GeeksforGeeks</h6> 
    </div> 
</body> 
</html>