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.
Typography Class | Description |
---|---|
class = “lead” | Creates a paragraph stand out in web page |
class = “text-start” | Bootstrap 5 shows left-aligned text in web page |
class = “text-break” | Bootstrap 5 avoids long text from breaking the layout on a web page |
class = “text-center” | It shows center-aligned text on a web page |
class = “text-decoration-none” | It deletes the underline from a link |
class = “text-end” | It shows right-aligned text on a web page |
class = “text-nowrap” | It shows no wrap text on a web page |
class = “text-lowercase” | It shows lowercased text on a web page |
class = “text-uppercase” | It shows uppercased text on a web page |
class = “text-capitalize” | It shows capitalized text on a web page |
class = “initialism” | It shows the text inside an <abbr> element in a smaller font size in web page |
class = “list-unstyled” | It Removes the default list style and left margin on the list element in a web page. This typography class applies to an immediate children list. |
class = “list-inline” | It places a list of items in a single line on a 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.