Bootstrap Typography

In this article, you will learn about Bootstrap typography.

Introduction

Typography is a way to give style and appearance to any text that we want to use in our Web page. Bootstrap's default font size is 14px in <body> and paragraphs.

Now, let us see the use of some elements to give style and appearance to the matter.

Headings

First, let us see how default headings work in Bootstrap, using <h1>.

Example

1

Output


2

Small

In Bootstrap the <small> keyword is used to create secondary text and lighter text in a heading.

3

Output


4

Mark

In Bootstrap <mark> element is used to highlight a particular text.

Abbreviation

In Bootstrap <abbr> element is used to mark up an abbreviation or acronym.

Example


5


Output


6


Blockquote

In Bootstrap <blockquote> is used to show the content from another source and if we want to show the content on the right, we can also use <blockquote-reverse>. Let me show you with an example.

7

Output


8


Context Color & Background color

In Bootstrap, we have contextual background class to provide “Meaning though colors.” Meaning can be given through text color or background color.

9

Output


10


Pre Elements

We can use pre elements to pre-define multiple line display.

11

Output
 
12
 
Pre-Scrollable
We can make a pre element scrollable by using <pre-scrollable> keyword. This provides a scroll bar in right side of a text.

Example


13


Output


14
 
Some more elements are given below that can be used to give style to an HTML text.

15

In this article, we learned basic typescripts of Bootstrap. I hope you have enjoyed learning.