There are 2 types of heading:
-
title -
subtitle
Title and Subtitle
Simple headings to add depth to your page
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 | Type | Default value | Computed value |
|---|---|---|---|
| Name | Type | Default value | Computed value |
$title-color
|
color |
$text-strong
|
hsl(0, 0%, 21%)
|
$title-family
|
boolean |
false
|
|
$title-size
|
size |
$size-3
|
2rem
|
$title-weight
|
font-weight |
$weight-semibold
|
600
|
$title-line-height
|
unitless |
1.125
|
|
$title-strong-color
|
string |
inherit
|
|
$title-strong-weight
|
string |
inherit
|
|
$title-sub-size
|
size |
0.75em
|
|
$title-sup-size
|
size |
0.75em
|
|
$subtitle-color
|
color |
$text
|
hsl(0, 0%, 29%)
|
$subtitle-family
|
boolean |
false
|
|
$subtitle-size
|
size |
$size-5
|
1.25rem
|
$subtitle-weight
|
font-weight |
$weight-normal
|
400
|
$subtitle-line-height
|
unitless |
1.25
|
|
$subtitle-strong-color
|
color |
$text-strong
|
hsl(0, 0%, 21%)
|
$subtitle-strong-weight
|
font-weight |
$weight-semibold
|
600
|
$subtitle-negative-margin
|
size |
-1.25rem
|
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub
