Bootstrap Typography


In this tutorial you will learn about the styling and formatting of text content like headings, paragraphs, blockquotes, and so on with Bootstrap.

Working with Headings

You can define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element’s text same as headings.

Example

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

— The output of the above example will look something like this:

Bootstrap Headings

Customizing Headings

Additionally, you can use the <small> tag with .text-muted class to display the secondary text of any heading in a smaller and lighter variation. Here’s an example:

Example

<h2>
    Fancy display heading
    <small class="text-muted">With faded secondary text</small>
</h2>

— The output of the above example will look something like this:

Bootstrap Headings with Secondary Text

Leave a Reply

Your email address will not be published. Required fields are marked *