Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Title

Improve Article
Save Article
  • Last Updated : 13 Feb, 2022
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, 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"
    />
</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"
    />
</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>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!