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

Title and Subtitle

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
$title-strong-color inherit
$title-strong-weight inherit
$title-line-height 1.125
$subtitle-color $grey-dark
$subtitle-size $size-5
$subtitle-weight $weight-normal
$subtitle-line-height 1.25
$subtitle-strong-color $grey-darker
$subtitle-strong-weight $weight-semibold
$subtitle-negative-margin -1.25rem

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!