Bootstrap 5 Typography is a feature of Bootstrap for styling and formatting text content. It is used to create customized headings, inline subheadings, lists, and paragraphs, align, add more design-oriented font styles, and much more. Bootstrap support global settings for the font stack, Headings and Link styles to be used in the web app for every type of OS and Device to deliver the best user interface.
Bootstrap 5 Typography:
- Headings: For heading, classes are available from [.h1 to .h6]. Heading classes help us create a font-style-like heading without the use of HTML heading tags.
- Display headings: Display headings are used to create a heading if it has a larger (larger font size and lighter font weight than a regular heading. Display heading classes are from .display-1 to .display-6.
- Lead: For creating a paragraph that standouts from other paragraphs .lead class is used.
- Inline text elements: The inline text-elements provide a method to style the common HTML elements.For ex: If we want to highlight a text in the paragraph we can use <mark> tag.
- Text utilities: The text utilities are used for changing text alignment, style, weight, line-height, and other decorations.
- Blockquotes: The <blockquote> tag in HTML is used to display long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. It contains both opening and closing tags.
- Lists: This method is basically used to style the list added on the webpage. By using this method we can remove the pre-defined styles on the lists and add new styles.
Syntax:
<p class="Typography classes"> ... </p>
Example 1: Let us see an example of Typography Headings.
HTML
|
|
Output:
Example 2: Let us see an example of display heading classes.
HTML
|
|
Output:
Reference: https://getbootstrap.com/docs/5.0/content/typography/