A basic guide to semantic markup, including proper usage examples.

The paragraph above is styled with .lead to make it stand out. It’s important to use keywords strategically in the page title, section headings, and lead paragraph without overdoing it. Make sure the content remains readable and is not overly repetitive.

Page Header

The header above is formatted as Heading 1. It is advised to use only one Heading 1 element per page, so reserve it for the page title.

Second-Level Header

The header above is formatted as Heading 2. Use it for major section headings. More than one may be used per page.

Third-Level Header

The header above is formatted as Heading 3, which may be used for headings below a Heading 2.

Fourth-Level Header

The header above is formatted as Heading 4, which may be used for headings below a Heading 3.

Fifth-Level Header

The header above is formatted as Heading 5, which may be used for headings below a Heading 4.

Sixth-Level Header

The header above is formatted as Heading 6, which may be used for headings below a Heading 5.

Paragraphs

Use the Enter key to create another paragraph, or Shift + Enter to create a line break in the current paragraph.

Content can also be styled as
Code, Danger, Info, Muted, Primary, Small, Success, and Warning.

Blockquote

Buttons

Bootstrap 5 does not include .btn-xs. Use .btn-sm or create a project-specific extra-small button
class.

Alerts

Progress bars

List groups

Cards

Utility panel