November 22nd, 2019 
Prerana Kasar 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>
Heding’s font-size
| 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 Heading 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.
<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.
<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.
<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.
<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.
.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.
<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.
<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.
<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.
Posted in 
Tags: 
