You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Titles

## Simple headings to add depth to your page

Colors No
Sizes Yes
Variables Yes

There are 2 types of heading:

- `.title`
- `.subtitle`

Title

Subtitle

    <h1 class="title">Title</h1>
    <h2 class="subtitle">Subtitle</h2>

### Sizes #

There are 6 sizes available:

Title 1

Title 2

Title 3 (default size)

Title 4

Title 5

Title 6

    <h1 class="title is-1">Title 1</h1>
    <h2 class="title is-2">Title 2</h2>
    <h3 class="title is-3">Title 3</h3>
    <h4 class="title is-4">Title 4</h4>
    <h5 class="title is-5">Title 5</h5>
    <h6 class="title is-6">Title 6</h6>

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5 (default size)

Subtitle 6

    <h1 class="subtitle is-1">Subtitle 1</h1>
    <h2 class="subtitle is-2">Subtitle 2</h2>
    <h3 class="subtitle is-3">Subtitle 3</h3>
    <h4 class="subtitle is-4">Subtitle 4</h4>
    <h5 class="subtitle is-5">Subtitle 5</h5>
    <h6 class="subtitle is-6">Subtitle 6</h6>

When you combine a title and a subtitle, they move closer together.

As a rule of thumb, 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`.

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

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

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

    <p class="title is-3">Title 3</p>
    <p class="subtitle is-5">Subtitle 5</p>

New!

You can maintain the normal spacing between titles and subtitles if you use the `is-spaced` modifier on the first element.

Title 1

Subtitle 3

Title 2

Subtitle 4

Title 3

Subtitle 5

    <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>

### Variables #

You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$title-color` | `$grey-darker`
`$title-size` | `$size-3`
`$title-weight` | `$weight-semibold`
`$subtitle-color` | `$grey-dark`
`$subtitle-size` | `$size-5`
`$subtitle-weight` | `$weight-normal`
`$subtitle-strong-color` | `$grey-darker`
`$subtitle-strong-weight` | `$weight-semibold`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!