{{> head title="Typography"}}
{{> sidebar-ela}}
{{> header-ela}}

#### Typography

Headings

# h1. Bootstrap heading

## h2. Bootstrap heading

### h3. Bootstrap heading

#### h4. Bootstrap heading

##### h5. Bootstrap heading

###### h6. Bootstrap heading

Display Headings

# Display 6

# Display 5

# Display 4

# Display 3

Lead & Body Text

This is a lead paragraph. It stands out from regular paragraphs with larger font size and weight. Make a paragraph stand out by adding `.lead`.

You can use the mark tag to highlight text. This is regular body text that shows the default typography styles applied in Bootstrap 5. The framework provides a solid typographic foundation with carefully chosen font sizes, line heights, and spacing.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM or wider.

Center aligned text on viewports sized MD or wider.

End aligned text on viewports sized LG or wider.

This text should overflow the parent.

Text Transform

Lowercased text.

Uppercased text.

Capitalized text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Font Sizes

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Blockquotes

> A well-known quote, contained in a blockquote element.

Someone famous in Source Title

> A well-known quote, contained in a blockquote element.

Someone famous in Source Title

> A well-known quote, contained in a blockquote element.

Someone famous in Source Title
Lists

##### Unordered List

- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.
- Nested lists:
  - are unaffected by this style
  - will still show a bullet
  - and have appropriate left margin

##### Ordered List

1. First item
2. Second item
3. Third item
4. Fourth item

##### Unstyled List

- This is a list.
- It appears completely unstyled.
- Structurally, it's still a list.
- However, this style only applies to immediate child elements.

Inline & Description Lists

##### Inline List

- This is a list item.
- And another one.
- But they're displayed inline.

##### Description List

Description lists
  A description list is perfect for defining terms.
Term

  Definition for the term.

  And some more placeholder definition text.

Another term
  This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
  This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
  Nested definition list
    I heard you like definition lists.

Code

##### Inline Code

Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.

For example, `<section>` should be wrapped as inline.

##### Code Blocks

    <p>Sample text here...</p>
    <p>And another line of sample text here...</p>

##### Variables

y = mx + b

##### User Input

To switch directories, type `cd` followed by the name of the directory.

To edit settings, press ``ctrl` + `,``

##### Sample Output

`This text is meant to be treated as sample output from a computer program.`
Abbreviations

attr

HTML

The WHO was founded in 1948.

You can use CSS to style your HTML.

Addresses
Line Height

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

Text Decoration

This text has a line underneath it.

This text has a line through it.

This link has its text decoration removed
{{> footer}}
{{> scripts}}