How to Bootstrap- Responsive Typography

In this tutorial, we will learn about Bootstrap responsive typography. Typography feature in Bootstrap allows you to create headings, paragraphs, lists and other inline elements.

Bootstrap uses Helvetica Neue, Helvetica, Arial, and sans-serif as the default font-family.

 

Bootstrap Headings

You can define all HTML headings, h1 through h6 in the same way you define in HTML document.

If you want to add an inline subheading to any of the headings, just add <small> tag  or add .small class.  As result, you will get smaller and lighter version of the text.

Bootstrap Example
    <h1> Bootstrap Heading h1. <small> secondary Heading h1 </small> </h1> 
    <h2> Bootstrap Heading h2. <small> secondary Heading h2 </small> </h2>
    <h3> Bootstrap Heading h3. <small> secondary Heading h3 </small> </h3>
    <h4> Bootstrap Heading h4. <small> secondary Heading h4 </small> </h4>
    <h5> Bootstrap Heading h5. <small> secondary Heading h5 </small> </h5>
    <h6> Bootstrap Heading h6. <small> secondary Heading h6 </small> </h6>

 

Result

Bootstrap Heading h1. secondary Heading h1

Bootstrap Heading h2. secondary Heading h2

Bootstrap Heading h3. secondary Heading h3

Bootstrap Heading h4. secondary Heading h4

Bootstrap Heading h5. secondary Heading h5
Bootstrap Heading h6. secondary Heading h6

 

Bootstrap Paragraphs

Bootstrap have a default font-size which is 14px, and the default line-height is 1.428. This is applied to the whole body and paragraphs. You can align the text inside a paragraph using text alignment classes.

Bootstrap Example
    <p class="text-left"> Left aligned paragraph. </p>
    <p class="text-center">Center aligned paragraph. </p>
    <p class="text-right">Right aligned paragraph. </p>
    <p class="text-justify">Justified paragraph. </p>

 

In Bootstrap, you can format text with many default tags same as way you do in normal HTML.

Bootstrap Example
    <p><big> big text </big></p>
    <p><code> programming code </code></p>
    <p><em> emphasized text</em></p>
    <p><mark>highlighted text</mark></p>
    <p><small>small text</small></p>
    <p> <sub>subscript</sub> and <sup>superscript</sup></p>
    <p><ins>This text is inserted in to the document</ins></p>
    <p><del>This text is deleted from the document</del></p>

 

Result

big text

programming code

emphasized text

highlighted text

small text

subscript and superscript

This text is inserted into the document

This text is deleted from the document

 

Bootstrap Emphasis Classes

Bootstrap have emphasis classes that can be used emphasis on texts like success message, warning or error message in a different color. The following example demonstrate emphasis classes

Bootstrap Example
    <p class="text-muted">This text is muted/Grayed out.</p>
    <p class="text-primary">This text is a primary content</p>
    <p class="text-success">This is a Success message</p>
    <p class="text-info">This is an information text</p>
    <p class="text-warning">This is a Warning Message!</p>
    <p class="text-danger">This content carries an Error message.</p>

 

Result

This text is muted/Grayed out.

This text is a primary content

This is a Success message

This is an information text

This is a Warning Message!

This content carries an Error message.

 

Blockquotes

The default <blockquote> tag in normal HTML text can be used in Bootstrap. You can use  <small> tag to identify the author of the quote.

Bootstrap Example
    <blockquote>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       <small><cite>Albert Einstein</cite></small>
    </blockquote>

 

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaSomeone famous

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...