Bootstrap Typography

Bootstrap Typography
<h1>through</h1>— 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.
Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see each one these in the following sections:
Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
    <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>
</body>
</html>

Moreover you can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation.
Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>

    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>

    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>

    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>

    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

</body>
</html>

Creating Page Headers
You can make your <h1>heading appear differently than rest of the headings on a page using the page header component. You can also utilize <small>tag to mark header subtext </small></h1>
Example

<div class="page-header">

        <h1> Bootstrap <small>An intuitive front-end bootstrap framework</small></h1>

    </div>

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

Working with Paragraphs
Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to theand all paragraphs. In addition to that a bottom margin of half their line-height (10px by default) is applied to the all paragraphs
You can also make a paragraph stand out by just adding the class .lead.
Example

     <p>This is how a normal paragraph looks like in Twitter Bootstrap.</p>

    <p class="lead">This is how a paragraph stands out in Twitter Bootstrap.</p>

The HTML code in the above examples will produce the following result:

This is how a normal paragraph looks like in Twitter Bootstrap.

This is how a paragraph stands out in Twitter Bootstrap.

You can easily align text inside a paragraph and other elements using text alignment classes.
Example

     <p class="text-left">Left aligned text.</p>

    <p class="text-center">Center aligned text.</p>

    <p class="text-right">Right aligned text.</p>

    <p class="text-justify">Justified text.</p>

    <p class="text-nowrap">No wrap text.</p>

Bootstrap Text Formatting
You are free to use text formatting tags like <strong>, <i>, <small>to make your text bold, italic, small and so on, in the same way you do in simple HTML.
Example

    <p><b>This is bold text</b></p>

    <p><big>This is big text</big></p>

    <p><code>This is computer code</code></p>

    <p><em>This is emphasized text</em></p>

    <p><i>This is italic text</i></p>

    <p><mark>This is highlighted text</mark></p>

    <p><small>This is small text</small></p>

    <p><strong>This is strongly emphasized text</strong></p>

    <p>This is <sub>subscript</sub> and <sup>superscript</sup></p>

    <p><ins>This text is inserted to the document</ins></p>

    <p><del>This text is deleted from the document</del></p>

The output of the above example will look something like this

This is bold text

This is big text

This is computer code

This is emphasized text

This is italic text

This is highlighted text

This is small text

This is strongly emphasized text

This is subscript and superscript

This text is inserted to the document

This text is deleted from the document

Text Transformation Classes
You can also transform the text to lowercase, uppercase or make them capitalize.
Example

    <p class="text-lowercase">Shiksha360 a unit of Glocal Technologies Pvt.Ltd</p>

    <p class="text-uppercase">Shiksha360 a unit of Glocal Technologies Pvt.Ltd</p>

    <p class="text-capitalize">Shiksha360 a unit of Glocal Technologies Pvt.Ltd</p>

Text Emphasis Classes
Colors are the powerful method of conveying important information in website design.
Bootstrap has handful of emphasis utility classes that can be used for this purpose such as showing success message in green color, warning or error message in red color, etc.
Example

    <p class="text-muted">Muted: This text is grayed out.</p>

    <p class="text-primary">Important: Please read the instructions carefully before proceed.</p>

    <p class="text-success">Success: Your message has been sent successfully.</p>

    <p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>

    <p class="text-warning">Warning: There was a problem with your network connection.</p>

    <p class="text-danger">Error: An error has been occurred while submitting your data.</p>

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

Muted: This text is grayed out.

Important: Please read the instructions carefully before proceed.

Success: Your message has been sent successfully.

Note: You must agree with the terms and conditions to complete the sign up process.

Warning: There was a problem with your network connection.

Error: An error has been occurred while submitting your data.

movie2k

Admin has written 171 articles