h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Display 6

Display 5

Display 4

Display 3

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-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

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.

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

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

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 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.

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

attr

HTML

The WHO was founded in 1948.

You can use CSS to style your HTML.

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.

This text has a line underneath it.

This text has a line through it.