Learn about the Typography Features of Bootstrap v4

0
1103
typography

Typography
Bootstrap v4 includes simple and effortlessly adapted typography for headings, body text, lists, footer blockquote and much more. The following are the contents under typography.

  • Bootstrap Headings: – All existing HTML headings, <h1> through <h6>, are available which have the following dimensions as shown in the table below. In Bootstrap v4, the class .h1 through .h6 are available, with which we can match the font styling of a heading. However, we cannot use the associated HTML element with these classes.

S No.

Bootstrap class Heading

Dimensions

1.

h1. Bootstrap heading

Semi-bold 2.5rem (40px).

2

h2. Bootstrap heading

Semi-bold 2rem (32px).

3.

h3. Bootstrap heading

Semi-bold 1.75rem (28px)

4.

h4. Bootstrap heading

Semi-bold 1.5rem (24px)

5.

h5. Bootstrap heading

Semi-bold 1.25rem (20px)

6.

h6. Bootstrap heading

Semi-bold 1rem (16px).

Example on Bootstrap Heading
In the following example, we are using .h1 to .h6 classes inside the html paragraph tag to create the font and design of the text as that of traditional html headings without associating these classes with the HTML element.

Output: When we execute above HTML code, we obtain the following output.
bootstrapheading

  • Customizing headings: – We can create our customized headings by using the included utility classes which help to recreate the small secondary heading text. This feature actually belongs to Bootstrap 3, which can be used in Bootstrap v4 as well.

Example on Customized Heading
In the following example, we are using .text-muted class inside the html heading to generate the fancy headings in order to experiment different customized heading designs.

Output: When we execute above HTML code, we obtain the following output.
customizedheadings

  • Display headings: – In Bootstrap v4, we can use display headings which are different from the traditional heading elements. Display heading are used as a stand out heading which is a larger, and slightly more opinionated in heading style.

Example on Display Heading
In the following example, we are using a class for different sizes of the display heading in collaboration with the html headings h1 to h6 which collectively provide a completely different display heading to add to our current web page design.

Output: When we execute above HTML code, we obtain the following output.
displayheading

Smaller Footprint
Naming a source: – We can add footer blockquote as <footer class=”blockquote-footer”> which can be used to identify the source. Further, we can wrap the name of the source work in cite as shown in the following example.

Example on Reversing Footer Blockquote
In the following example, we are using .blockquote-reverse class to left align the footer blockquote.

Output: When we execute above HTML code, we obtain the following output.
blockquote

Reverse layout
We can add .blockquote-reverse class for a blockquote in order to make footer blockquote as right-aligned content.

Example on Reversing Footer Blockquote
In the following example, we are using .blockquote-reverse class to right align the footer blockquote.

Output: When we execute above HTML code, we obtain the following output.
reverselayout
Source code for the the typography features of Bootstrap v4

Conclusion
In this chapter, we discussed about the typography features of Bootstrap v4 for headings, body text, lists, and footer blockquote – both left and right aligned along with suitable examples. Such robust and pretty features of Bootstrap v4 make it’s a unique front end development framework which makes it a very popular framework and is widely used by many organizations.

LEAVE A REPLY

Please enter your comment!
Please enter your name here