Bootstrap Text Typography

Ad Banner Image

Bootstrap Text Typography

Through Bootstrap Typography you can style and add the text content. Through this you can create the customized headings, subheadings, look and feel of the paragraphs and text and many more.

The default font-size of <body> tag is 14px and line-height is 1.428 in bootstrap

Difference between Bootstrap and Default Text Typography

Bootstrap text typography has a slightly different look and feel to default text typography.

Headings

The font-size of HTML Headings in Bootstrap is slightly different.

In the below table shown the font-size of <h1>-<h6>

Monthly savings

Heading tag font-size(px) in HTML font-size(px) in Bootstrap
<h1> 32px 36px
<h2> 24px 30px
<h3> 18px 24px
<h4> 1.09em or 17.50px 18px
<h5> 0.83em or 13.28px 14px
<h6> 0.67em or 10.72px 12px

Example: 1 – Bootstrap Text Typography Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
    <div class="container" style="background-color: lightpink;">
        <div class="row">
            <h1>Heading 1 36px</h1>
            <h2>Heading 2 30px</h2>
            <h3>Heading 3 24px</h3>
            <h4>Heading 4 18px</h4>
            <h5>Heading 5 14px</h5>
            <h6>Heading 6 12px</h6>
        </div>
    </div>
</body>
</html>

On the above coding here we use the headings in the bootstrap.

Here the different heading tags are applied in the above code. The all headings <h1> to <h6> vary the font size from bigger font-size to small.

Bootstrap Heading Size
Fig.1 – Bootstrap Heading Tags.

<small> tag

In bootstrap <small> tag is used to reduce 15% the font-size of a particular element to its parent. And also lighter the text color.

Example: 2

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
    <div class="container" style="background-color: rgba(0,0,0,0.1);">
        <div class="row">
            <h1>Lorem ipsum <small>Lorem ipsum</small></h1>
            <p>Lorem ipsum <small>Lorem ipsum</small></p>
        </div>
    </div>
</body>
</html>

Here <small> tag is applied in the <h1> and <p> tags. So the font-size is reduced and the color is brighter to the default tags.

Bootstrap3 Text Typography
Fig.2 – Bootstrap <small> Tags.

<mark> tag

In bootstrap <mark> tag is used to highlight or limelight a particular element. This is defined by the light-orange background-color.

Example: 3

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
    <div class="container">
        <div class="row">
            <h1>Lorem ipsum <mark>Lorem ipsum</mark></h1>
            <p>Lorem ipsum <mark>Lorem ipsum</mark></p>
        </div>
    </div>
</body>
</html>

Here <mark> tag is applied in the <h1> and <p> tags. Than tha word is highligted with the background color lightorange.

Bootstrap 3 Text Typography Examples
Fig.3 – Bootstrap <mark> Tags.

<abbr> tag

In bootstrap <abbr> tag is an abbreviation tag that is used to describe abbreviations (full-form) or give information about that particular word when the cursor is over that word. The below code shows how the <abbr> tag work. And how display the information when the cursor over it.

Example: 4

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Grid System</title>
    <!-- link the bootstrap online or through CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
<body>
    <div class="container">
        <div class="row">
            <h1><abbr title="National Aeronautics and Space Administration">NASA</abbr></h1>
        </div>
    </div>
</body>
</html>

Here <abb> tag is applied in the <h1>tag. The description of that word displayed when we move over the cursor to that word.

Bootstrap 3  abb Text Typography Examples
Fig.4 – Bootstrap <abb> Tags.
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress