Typography

Examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Headings

h1. Heading text

h2. Heading text

h3. Heading text

h4. Heading text

h5. Heading text
h6. Heading text
Headings with secondary text

h1. Secondary text

h2. Secondary text

h3. Secondary text

h4. Secondary text

h5. Secondary text
h6. Secondary text
Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lead body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Alignment

Left aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Center aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Right aligned text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text Alignment (responsive)

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

Unordered list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • sed do eiusmod tempor
  • incididunt ut labore et
  • dolore magna aliqua
    • Ut enim ad minim veniam
    • quis nostrud exercitation
    • ullamco laboris nisi ut
    • aliquip ex ea commodo consequat
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • sed do eiusmod tempor
Ordered list
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. sed do eiusmod tempor
  4. incididunt ut labore et
  5. dolore magna aliqua
    • Ut enim ad minim veniam
    • quis nostrud exercitation
    • ullamco laboris nisi ut
    • aliquip ex ea commodo consequat
  6. Lorem ipsum dolor sit amet
  7. Consectetur adipiscing elit
  8. sed do eiusmod tempor
Unordered list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • sed do eiusmod tempor
  • incididunt ut labore et
  • dolore magna aliqua
    • Ut enim ad minim veniam
    • quis nostrud exercitation
    • ullamco laboris nisi ut
    • aliquip ex ea commodo consequat
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • sed do eiusmod tempor
Text elements

You can use the mark tag to highlight text.

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.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com