Bulma | Title Subtitle

Bulma title | subtitle is used to create title & subtitle of the content. Bulma provides two types of headings.

  1. title
  2. subtitle

To create Bulma title add .title class & to create Bulma subtitle add .subtitle class.

Example

sudhakarinfotech

Providing web development technology.

General Syntax

      
        <element class="title">Title</element>
<element class="subtitle">Subtitle</element>      
    
Try it now

Source Code

          
            <h2 class="title">sudhakarinfotech</h2>
<h4 class="subtitle">Providing web development technology.</h4>          
        
Try it now

Source Code : Output

sudhakarinfotech

Providing web development technology.

Title & Subtitle Size

There are six sizes available for title & subtitle. These are .is-1,.is-2,.is-3,.is-4,.is-5,.is-6

Example

sudhakarinfotech

Learn html5,CSS3,Javascript,Jquery, Ajax,JSON,PHP

General Syntax

      
        <element class="title is-{1 to 6}">Title</element>
<element class="subtitle is-{1 to 6}">Title</element>      
    
Try it now

Source Code

          
            <h2 class="title is-2">sudhakarinfotech</h2>
<h2 class="subtitle is-4">Learn html5,CSS3,Javascript,Jquery, Ajax,JSON,PHP  </h2>          
        
Try it now

Source Code : Output

sudhakarinfotech

Learn html5,CSS3,Javascript,Jquery, Ajax,JSON,PHP

Title & Sub Title

You can combine a title and a subtitle, they move closer together.

It is recommended to use a size difference of two. So if you use a title .is-1, combine it with a subtitle .is-3.

General Syntax

      
        <element class="title is-{i}"></element>
<element class="subtitle is-{i+2}"></element>      
    
Try it now

Source Code

          
            <p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>          
        
Try it now

Source Code : Output

Title 1

Subtitle 3

Title & Subtitle Space

You can maintain spacing between title and subtitle using the .is-spaced modifier class to the first element having .title modifier class.

General Syntax

      
        <element class="title is-{1 to 6} is-spaced">Title</element>
<element class="subtitle is-{1 to 6}">Subtitle</element>      
    
Try it now

Source Code

          
            <div class="container">
<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>

<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>

<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>
</div>          
        
Try it now

Source Code : Output

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

Web Tutorials
Bulma | Title Subtitle
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4