Bootstrap 5 Typography

Typography is a Bootstrap 5 component for designing and formatting text content. It is used to produce customized headers, inline subheadings, lists, paragraphs, aligning, and adding additional design-oriented font styles, among other things.

To provide the greatest user interface, Bootstrap 5 supports global options for the font stack, headings, and link styles in the web app for any type of OS and device.

Bootstrap 5 Body Texts

Bootstrap 5 has a default font-size of 1rem or 16px. It has a 1.5 line-height of font. Furthermore, all <p> elements have a margin-top: 0 and a margin-bottom: 1rem or 16px by default.

We can adjust any of these settings to suit our project. We can, for example,

• As the typographic base for the body element, use the $font-family-base, $font-size-base, and $line-height-base attributes.
• Using $link-color, We can change the color of all global links.
• To change the background color of the body element, use $body-bg (the default is #fff).

Bootstrap 5 heading

HTML headings like h1 to h6 are styled with a bolder font-weight and a responsive font size in Bootstrap 5.

Example

The following example shows heading class of the text in bootstrap 5. In this example, we can use class of the h1 to h6 headings instead of elements. This heading uses as per size and bold of the text.

Output:

The following image shows bootstrap 5 typography's output. It shows the heading in bootstrap 5.

Bootstrap 5 Display Headings

Display headers are intended to be more visible than regular headings. Bootstrap 5 includes six display heading sizes (.display-1, .display-2, .display-3, .display-4, .display-5, and .display-6).

Example

The following example shows display heading class of the text in bootstrap 5. In this example, we can use "display-size" class with the "1 - 6" sizes. This class affects on height and width of the heading.

Output:

The following image shows bootstrap 5 typography's output. It shows the heading in bootstrap 5.

Bootstrap 5 Sub Headings

We can create a sub-heading or supplementary text by adding text inside an <small> element within the heading. Bootstrap classes can also be applied to that element.

Example

The following example shows sub heading class of the text in bootstrap 5. In this example, we use the "small" element in the heading class or element like <h1> Element. Heading shows bold and strong text and <small> elements content shows smaller than the heading text.

Output:

Mark, Abbreviation, and Keyboard Input

Bootstrap 5 will apply a yellow background color and padding using the <mark> element and .mark class.

The HTML <abbr> element will be styled by Bootstrap 5 with a dotted border-bottom and a cursor with a question mark on hover.

Keyboard Inputs is a term to describe input commonly entered via a keyboard. The <kbd> element uses for keyboard input.

Example

The following example shows style of the text in bootstrap 5. In this example, we use three elements or class for the text. The <mark> element shows yellow background and "kbd" shows popup box after using given keyboard button.

Output:

Bootstrap 5 lists typography

Bootstrap 5 typography uses <dl> for list typography. It helps to create and display a list and its description. The <dl> element create list in the bootstrap 5 typography. The <dt> elements use to create the heading of the list. The <dd> element uses to create items or descriptions of the list.

Example

The following example shows list element of the text in bootstrap 5. In this example, we can use three elements such as a <dl>, <dt>, <dd> to create list and list description.

Output:

The following image shows bootstrap 5 typography's output.

Bootstrap 5 code typography

Bootstrap 5 typography uses <code> element for code content without shows output.

Example

The following example shows the "code" element as a text in bootstrap 5. The bootstrap 5 version writes code on html page then page shows output. if we wants to show code instead of output then bootstrap 5 use <code> element.

Output:

The following image shows bootstrap 5 typography's output. We can see the output of the code and the code itself on the web page.

Bootstrap 5 typography classes

Bootstrap 5 typography uses several classes to style web content and information. The following table shows classes used on the web page.

Example

The following example shows the style of the text in bootstrap 5. In this example, we can use different classes on the web page.

• First <p> element uses "lead" and "text-center" classes.
• Second <p> element uses "text-uppercase" and "text-start" classes.
• Third <p> element uses "text-lowercase" and "text-center" classes.
• Fourth <p> element uses " text-capitalize" and "text-end" classes.

Output:

The following image shows bootstrap 5 typography's output.

Conclusion

The web application's content styles by using typography classes. This class helps create attractive, eye-catchy, and understandable content on web pages. Bootstrap 5 typography uses several classes and elements and avoids CSS properties.