* * * ## Bootstrap 4 Default Settings Bootstrap 4'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 (`

` to `

`). See the example below: ## Example

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

[Try it »](#) ### Display Headings Bootstrap also provides four display classes to control heading styles: `.display-1`, `.display-2`, `.display-3`, `.display-4`. ## Example

Display headings

Display headings are used to stand out more than normal headings (larger and bolder text).

Display 1

Display 2

Display 3

Display 4

[Try it »](#) * * * ## In Bootstrap 4, 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 4 defines `` with a yellow background and some padding: ## Example

Highlighted Text

Use the mark element to highlight text.

[Try it »](#) * * * ## Bootstrap 4 defines the style of the HTML `` element with a dotted border at the bottom: ## 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 4 defines the style of 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 4 defines the style of the HTML `` element as follows: ## Example

Code Snippets

Inline code can be put inside a code element:

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

[Try it »](#) ## Bootstrap 4 defines the style of 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 4 defines the style of 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 4 typography classes:

| Class | Description | Example |
| --- | --- | --- |
| .font-weight-bold | Bold text | (#) |
| .font-weight-normal | Normal weight text | (#) |
| .font-weight-light | Lighter weight text | (#) |
| .font-italic | Italic text | (#) |
| .lead | Makes a paragraph stand out | (#) |
| .small | Specifies smaller text (85% of the parent) | (#) |
| .text-left | Left-aligned text | (#) |
| .text-center | Center-aligned text | (#) |
| .text-right | 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. Text that exceeds the screen width will not wrap to the next line. | (#) |
| .text-lowercase | Sets text to lowercase | (#) |
| .text-uppercase | Sets text to uppercase | (#) |
| .text-capitalize | Capitalizes the first letter of each word | (#) |
| .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 (for `
` and `
`). This class only applies to direct child list items (if you need to remove list items from nested lists, you will need to apply the style to the nested list). | (#) |
| .list-inline | Places all list items on a single line | (#) |
| .pre-scrollable | Makes the `
` element scrollable. The maximum height of the code block area is 340px. Once this height is exceeded, a scrollbar will appear on the Y-axis. | (#) |