Bootstrap Text Typography

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.

<blockquote> tag

In bootstrap <blockquote> tag is used to create the indent to the whole paragraph and also have left border. And the below code shows that how blockquote tag work and shows how’s the paragraph will be displayed.

In bootstrap if we used <footer> tag in the <blockquote> tag than this footer content will show in the light grey-color and have a dashed line.

Example: 5

<!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">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
			<blockquote>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
				<footer>Lorem ipsum</footer>
			<blockquote>
        </div>
    </div>
</body>
</html>

Here <blockquote> tag is applied in the <p>tag. This paragraph show with indent and lightgrey color left-border. And the footer tag content shown as the below image.

Bootstrap 3 Text Typography
Fig.5 – Bootstrap <blockquotes> Tags.

.blockquote-reverse

In bootstrap <blockquote> tag is used to create the indent to the whole paragraph and also have right border and have the right direction of paragraph.

Example: 5

<!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">
			<blockquote class="blockquote-reverse">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
				<footer>Lorem ipsum</footer>
			<blockquote>
        </div>
    </div>
</body>
</html>

The above shows that how you can apply the class blockquote-reverse to the <blockquote> tag.

bootstrap 3 text typography blockquote reverse
Fig.6 – Bootstrap <blockquotes> Tags with blockquote-reverse.

<dl> tag

In bootstrap <dl> tag is styled as that the data-title(dt) element is bold and the data discription is light.

Example: 7

<!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">
		<h1>Description Lists</h1>    
		<dl>
			<dt>Milk</dt>
			<dd>Hot and cold milk.</dd>
			<dt>Tea</dt>
			<dd>Hot Tea.</dd>
		</dl>     
    </div>
</body>
</html>

Here we write the discription list code were discription list is defined as <dl>. The below code show that how the description list will displayed in the bootstrap 3.

Bootstrap 3 Description List
Fig.7 – Bootstrap <dl> Tags example.

<code> tag

In bootstrap <code> tag is styled as that the text-color is red and background-color is grey.

Example: 8

<!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">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <code>incididunt</code> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>cupidatat</code> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

Here we have a paragraph tag <p> with some element and we apply the <code> tag to the words of that paragrapgh tag. Than that word text-color is red and have background-color of grey which is shown in the below image.

Bootstrap 3 Text Typography Code Tag
Fig.8 – Bootstrap <code> Tags.

<pre> tag

In bootstrap <pre> tag is styled as to write the element as it is with grey background-color and light shade border.

Example: 9

<!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">
			<pre>Lorem ipsum dolor sit amet, 
			eiusmod tempor 
			minim veniam, quis nostrud exercitation ullamco laboris 
			ex ea commodo consequat. Duis autenulla pariatur.</pre>
        </div>
    </div>
</body>
</html>

Here we apply <pre> tag to the element and the below image will shows that how the resultant of this <pre> tag.

Bootstrap 3 Text Typography pre Tag
Fig.9 – Bootstrap <pre> Tags Example.
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!          Protected by Copyscape