Bulma | Title Subtitle
Bulma title | subtitle is used to create title & subtitle of the content. Bulma provides two types of headings.
titlesubtitle
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>
Source Code
Download
<h2 class="title">sudhakarinfotech</h2>
<h4 class="subtitle">Providing web development technology.</h4>
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>
Source Code
Download
<h2 class="title is-2">sudhakarinfotech</h2>
<h2 class="subtitle is-4">Learn html5,CSS3,Javascript,Jquery, Ajax,JSON,PHP </h2>
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>
Source Code
Download
<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>
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>
Source Code
Download
<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>
Source Code : Output
Title 1
Subtitle 3
Title 2
Subtitle 4
Title 3
Subtitle 5
Web Tutorials
