Bulma Title Sizes

Last Updated : 30 Jan, 2022

In Bulma, there are two types of headings which are Title and Subtitle. These simple headings are used to add some depth to a web page or website. Title and Subtitle are available in many sizes and can be used as per our requirements.

Bulma Title/Subtitle size classes:

is-1: This class is used along with the classes of “title” or “subtitle” for the HTML h1 element.
is-2: This class is used along with the classes of “title” or “subtitle” for the HTML h2 element.
is-3: This class is used along with the classes of “title” or “subtitle” for the HTML h3 element. This is the default size for the title element.
is-4: This class is used along with the classes of “title” or “subtitle” for the HTML h4 element.
is-5: This class is used along with the classes of “title” or “subtitle” for the HTML h5 element. This is the default size for the subtitle element.
is-6: This class is used along with the classes of “title” or “subtitle” for the HTML h6 element.

Types of Headings in Bulma:

Title: When we need to use a title, we use the class “title”.
Subtitle: When we need to use a subtitle, we use the class “subtitle”.

Syntax:

<h1 class="title">Title/h1>
    <h2 class="subtitle">Subtitle</h2>
    <p class="title is-1">
      ....
    </p>

Example 1: The following example demonstrates title and subtitle class into h1 and h2 headings.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Title & Subtitle</title> 
    <link rel='stylesheet' href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="title">GeeksforGeeks</h1> 
    <h2 class="subtitle">GeeksforGeeks</h2> 
</body> 
</html>

Output:

Example 2: The following example demonstrates the above title sizes. Title is-3 class is the default size.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Title & Subtitle</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="title is-1">GeeksforGeeks</h1> 
    <h2 class="title is-2">GeeksforGeeks</h2> 
    <h3 class="title is-3">GeeksforGeeks</h3> 
    <h4 class="title is-4">GeeksforGeeks</h4> 
    <h5 class="title is-5">GeeksforGeeks</h5> 
    <h6 class="title is-6">GeeksforGeeks</h6> 
</body> 
  
</html>

Output:

Title Sizes

Example 3: The following example demonstrates the above subtitle sizes. The subtitle is-5 class is the default size.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Title & Subtitle</title> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</head> 
  
<body> 
    <h1 class="subtitle is-1">GeeksforGeeks</h1> 
    <h2 class="subtitle is-2">GeeksforGeeks</h2> 
    <h3 class="subtitle is-3">GeeksforGeeks</h3> 
    <h4 class="subtitle is-4">GeeksforGeeks</h4> 
    <h5 class="subtitle is-5">GeeksforGeeks</h5> 
    <h6 class="subtitle is-6">GeeksforGeeks</h6> 
</body> 
  
</html>