Chapter 8 - Bootstrap 3 - Headings (Typography)

Like the normal html you can your headings in the bootstrap all the h1 to h6 tags are available in the bootstrap 3. There is also one advantage if you want to give the same heading style to another element text. you can user the class .h1 to .h6 by doing this you get the the same style of heading in the element in display inline. There is another inbuilt feature in the html to attach the subheading text within the heading text.

These are six levels of headings in the html. a heading have their own different font size, like break before and after the heading text and also white space to represent the heading.The heading tags are h1, h2, h3, h4 ,h5, h6 in these tags the h1 is the most important and largest level of the heading and the h6 is the least important and very small in size in the headings.

h1, h2, h3, h4, h4 and h6 tags usages

            <div class="container">
<div class="row">
<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>
</div>
</div>


Now the one for example using the bootstrap heading classes .h1, .h2, .h3 .h4, .h5 and .h6 with div elements.

heading classes .h1, .h2, .h3, .h4, .h5 and .h6 usages

<div class="container">
<div class="row">
<div class="h1">Heading 1</div>
<div class="h2">Heading 2</div>
<div class="h3">Heading 3</div>
<div class="h4">Heading 4</div>
<div class="h5">Heading 5</div>
<div class="h6">Heading 6</div>
</div>
</div>

In the below example you can see the headings secondary text using small tag or .small class.

Heading secondary text using small tag or .small class