Typography in Bootstrap 4
In this article, we will understand about the typography in Bootstrap 4.
What do you mean by Typography in Bootstrap 4.
In Bootstrap 4, Typography is a feature for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and much more.
Following classes and tags are used to implement the typography feature in bootstrap 4:
1. text-muted: This class is used for color the text and adds text-muted fades in the text.
Example:
Explanation:
In the above example, we have created an example of text-muted class.
Output:
Following is the output of this example:
2. display: This class is used to create better headings in bootstrap 4.
Example:
Explanation:
In the above example, we have created a display class.
Output:
Following is the output of this example:
3. lead: It is used to make a paragraph stand out i.e. Visually better.
Example:
Explanation:
In the above example, we have created an example of lead class in Bootstrap 4.
Output:
Following is the output of this example:
4. mark: This tag is used to highlight the text.
Example:
Explanation:
In the above example, we have created an example of mark tag in typography.
Output:
Following is the output of this example:
5. small: This tag is used to create secondary subheadings.
Example:
Explanation:
In the above example, we have created an example of a small tag in bootstrap 4.
Output:
Following is the output of this example.
6. initialism: It is used to render abbreviations in slightly small text sizes.
Example:
Explanation:
In the above example, we have created an example of an initialism class with an abbr tag.
Output:
Following is the output of this example:
7. blockquote: This tag is used to quote content.
Example:
Explanation:
In the above example, we have created an example of a blockquote tag.
Output:
Following is the output of this example:
8. blockquote-footer: It is the footer details for identifying the source of the Quote.
Example:
Explanation:
In the above example, we have created an example of blockquote footer class.
Output:
Following is the output of this example:
9. text-center: This class is used to align the text to center.
Example:
Explanation:
In the above example, we have created an example of text-centre class.
Output:
Following is the output of this example:
10. text-truncate: This class is used to shorten the longer text by truncating with ellipsis.
Example:
Explanation:
In the above example, we have created an example of text-truncate class.
Output:
Following is the output of this example:
11. text-uppercase: This class is used to transform text to uppercase.
Example:
Explanation:
In the above example, we have created an example of text-uppercase.
Output:
Following is the output of this example:
12. text-lowercase: This class is used to transform text to lowercase.
Example:
Explanation:
In the above example, we have created an example of text-lowercase class.
Output:
Following is the output of this example:
13. text-capitalize: It is used to transform text to capitalize the first letter of each word leaving other letters in lowercase.
Example:
Explanation:
In the above example, we have created an example of text-capitalize.
Output:
Following is the output of this example:
