Typography

In this article, we are going to learn about the Typography feature of Bootstrap 4. Typography refers to the various styles present in Bootstrap 4 style sheets which define how various text elements will appear on the web page. It shows how certain text elements are rendered when we use Bootstrap without including the style classes. Such text elements on a web page will always be rendered through the link to Bootstrap 4 style sheet in the same way except these elements are overridden by other style classes.

Body Text
The following are the default typography for the body text in Bootstrap 4.

  • The global default font-size for the body text in Bootstrap 4 is 16px which is applied to the <html> element.
  • Body text’s line-height of 1.5 is applied to the <body> element. The font-size of 1rem is applied to the <body> element in Bootstrap 4.
  • The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif in Bootstrap 4.
  • The <p> elements have a bottom margin of 1rem.

These all the default typography for the text elements on the web page that uses Bootstrap 4. All of these styles can be changed with the use of style classes in Bootstrap 4.

The following program demonstrates the page default in Bootstrap 4.0.0.

Output
When we browse the above HTML code, we can see the Bootstrap 4.0.0 page default as shown below. The web font for the text “This is a Bootstrap 4.0.0.0 page default.” is “Segoe UI” i.e. for windows operating system.

BodyText

Headings

  • 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 similar to 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 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 will 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 the class for different size of the display heading in collaboration with html headings h1 to h6 which collectively provide a completely different display heading to add stars to our current web page design.

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

DisplayHeading

Lead Text
If we want to make a paragraph that should stand out, then we can use Bootstrap’s .lead class.

Marked Text
We can use the HTML <mark> element to represent text as marked or highlighted for reference purposes.

Abbreviations
We can use the <abbr> element to represent an abbreviation or acronym. Also, we can use the title attribute to provide an expansion of the abbreviation. Therefore, abbreviations in collaboration with a title attribute will be rendered with a light dotted bottom border and a help cursor on hover.

Initialism
We can use the Bootstrap .initialism class to render the abbreviation in a slightly smaller font size. Let’s see the demonstration in the following example.

Example to demonstrate Lead Text, Marked Text, Abbreviations, and Initialism

Output
When we will execute the above HTML code, we get the following output.

Text Typography

Blockquote – 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

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 the above HTML code, we can obtain the following output.

Reverselayout

Code

In Bootstrap 4, the <code> element is rendered as a distinct text which is demonstrated in the following example.

Keyboard Input

In Bootstrap 4, the <kbd> element is rendered as a white bold text with black background which is demonstrated in the following example.

Preformatted Text

In Bootstrap 4, the <pre> element is rendered as demonstrated in the following example.

Sample Text

In Bootstrap 4, the <samp> element is rendered as demonstrated in the following example.

Variables

In Bootstrap 4, the <var> element is rendered as demonstrated in the following example.

Example to demonstrate Code, Keyboard Input, Preformatted Text, Sample Text, and Variables

 

Output: When we will execute the above HTML code, we will observe the following output.

Text Typography2

Source code for Bootstrap 4 -Typography is here different typography features of Bootstrap v4

Conclusion: –
In this chapter, we discussed the different typography features of Bootstrap v4 for headings, body, blockquote, Lead Text, Marked Text, Abbreviations, Initialism, Code, Keyboard Input, Preformatted Text, Sample Text, and Variables with suitable examples. Such robust and pretty features of Bootstrap v4 make it very popular and unique front end development framework which is widely used by many organizations.

Learn about Typography in Bootstrap 4 was last modified: by