* * * ## Bootstrap 5 Default Settings Bootstrap 5's default font-size is 16px, and the line-height is 1.5. The default font-family is "Helvetica Neue", Helvetica, Arial, sans-serif. Additionally, all

elements have margin-top: 0 and margin-bottom: 1rem (16px). * * * ##

-

Bootstrap defines styles for all HTML headings (h1 to h6). See the example below: ## Example

h1 Bootstrap heading

h2 Bootstrap heading

h3 Bootstrap heading

h4 Bootstrap heading

h5 Bootstrap heading

h6 Bootstrap heading

[Try it »](#) You can also use the .h1 to .h6 classes to style elements: ## Example

h1 Bootstrap heading

h2 Bootstrap heading

h3 Bootstrap heading

h4 Bootstrap heading

h5 Bootstrap heading

h6 Bootstrap heading

[Try it »](#) ### Display Heading Classes Bootstrap also provides four Display classes to control the style of headings: .display-1, .display-2, .display-3, .display-4. ## Example

Display headings

Display headings are used to stand out with larger and bolder text.

Display 1

Display 2

Display 3

Display 4

[Try it »](#) * * * ## In Bootstrap 5, the HTML element is used to create smaller, lighter text: ## Example

Smaller text heading

The small element is used for smaller, lighter text:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

[Try it »](#) * * * ## Bootstrap 5 defines the tag and the .mark class with a yellow background and some padding: ## Example

Highlighted text

Use the mark element to highlight text.

[Try it »](#) * * * ## Bootstrap 5 styles the HTML element with a dotted border underneath: ## Example

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

[Try it »](#) * * * ##

For quoting content from another source, you can add the .blockquote class to a

: ## Example

Blockquotes

The blockquote element is used to present content from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

[Try it »](#) * * * ##

Bootstrap 5 styles the HTML

element as follows: ## Example

Description Lists

The dl element indicates a description list:

Coffee

- black hot drink

Milk

- white cold drink

[Try it »](#) * * * ## Bootstrap 5 styles the HTML element as follows: ## Example

Code Snippets

Inline code elements can be placed inside a code element:

The following HTML elements: span, section, and div are used to define parts of a document.

[Try it »](#) ## Bootstrap 5 styles the HTML element as follows: ## Example

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

[Try it »](#) * * * ##

Bootstrap 5 styles the HTML 
 element as follows:

## Example

Multiple Code Lines
For multiple lines of code, use the pre element:
 Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. 

[Try it »](#)

* * *

## More Typography Classes

The table below provides examples of more Bootstrap 5 typography classes:

| Class Name | Description | Example |
| --- | --- | --- |
| .lead | Makes a paragraph stand out | (#) |
| .small | Specifies smaller text (85% of the parent) | (#) |
| .text-start | Left-aligned text | (#) |
| .text-center | Center-aligned text | (#) |
| .text-end | Right-aligned text | (#) |
| .text-justify | Justified text. Text that exceeds the screen width will automatically wrap to the next line | (#) |
| .text-nowrap | Prevents text from wrapping to the next line if it exceeds the screen width | (#) |
| .text-lowercase | Transforms text to lowercase | (#) |
| .text-uppercase | Transforms text to uppercase | (#) |
| .text-capitalize | Transforms the first letter of each word to uppercase | (#) |
| .initialism | Displays the text inside an  element in a smaller font size and can convert lowercase letters to uppercase | (#) |
| .list-unstyled | Removes the default list-style and left-aligns list items (in 
 and 
). This class only applies to direct child list items (if you need to remove nested list items, you must apply the style to the nested list) | (#) |
| .list-inline | Places all list items on the same line | (#) |