Hit enter after type your search item

Creating Titles/Headings in Bulma

For creating headings in your website, you may use two modifiers in Bulma:

  • title
  • subtitle

You may use these modifier classes with heading tags (h1..h6) or other text related tags e.g. <p> tag for creating titles or subtitles. With these modifiers, you may use the available six classes related to sizes and also manage the spacing.

The examples below show how to use these classes in a web page.

The title and subtitle modifiers example

In this example, I used two available classes for creating the headings in Bulma. The title and subtitle are applied to the h1 tag, p tag and span tags of HTML. Have a look:

bulma headings

See online demo and code

The example of title size

Six sizes are available in Bulma that you may use with the title and subtitle classes. See the example below to learn about the difference in sizes:

bulma heading size

See online demo and code

You may apply is-1 to is-6 sizes to any of the heading tags, paragraphs etc.

Note: the default size is is-3 for the title.

Sizes for subtitle example

Similarly, you may apply the size classes to the subtitle as shown below:

bulma subtitle size

See online demo and code

The default size for subtitles is is-5.

An example of normal spacing in title and subtitle

If you use the is-spaced modifier in the first element, you can maintain the normal spacing between titles and subtitles.

In this example, we have an h1 heading element with title and is-spaced class. Then we have a demo text in paragraphs and so on. Have a look at spacing:

See online demo and code

This div height required for enabling the sticky sidebar