Typography

Headings

Standard Headings

H1 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H2 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H3 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H4 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H5 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H6 Lorem ipsum dolor sit amet

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc, nec aliquet dui. Cras sed lacus tellus, in porttitor tortor. Vivamus auctor mattis nunc, quis mattis justo vulputate at. Nam rhoncus mollis convallis.

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet
H6 Lorem ipsum dolor sit amet

Heading Classes

When you want to match the font styling of a heading but cannot use the associated HTML element, you can use CSS classes h1 through h6.

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet

H6 Lorem ipsum dolor sit amet

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet

H6 Lorem ipsum dolor sit amet

Headings With Subtitles

To add a subtitle to a heading, you can nest it within like <small class="text-muted">My Subtitle</small>.

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0
Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0

Lorem Ipsum Dolor Version 1.0.0
Lorem Ipsum Dolor Version 1.0.0

Headings With Underline

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet
H6 Lorem ipsum dolor sit amet

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet
H6 Lorem ipsum dolor sit amet

These can also be combined with text alignment classestext-left, text-center and text-right.

H4 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

Note: Looking for something similar to heading underlines, but a little different? The .heading-underline element tends to look better in smaller areas like with widgets. But often with larger headings, a similar but different approach can be taken with using dividers.

Larger Headings

Add the classes heading-lg, heading-xl, heading-xxl or heading-xxxl to any heading tag to make it visually larger. — For example, this can be useful for the title of a page or something else outside of the main content area.

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Smaller Headings

Add the classes heading-sm, heading-xs, heading-xxs or heading-xxxs to any heading tag to make it visually smaller. — For example, this can be useful for the title of a widget in your sidebar or something else outside of the main content area.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lead Text

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Sed congue quam non ante pharetra id aliquam nunc elementum.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Sed congue quam non ante pharetra id aliquam nunc elementum.

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

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.

Misc Elements

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline from Normalize.css and gain a help cursor to provide additional context on hover and to users of assistive technologies. For example —

We love writing HTML!

We love writing HTML!

Address

Theme Blvd
123 Front Street, Suite 600
Colorado Springs, CO 80906
P: (123) 456-7890
Jason Bobich
first.last@example.com
Theme Blvd
123 Front Street, Suite 600
Colorado Springs, CO 80906
P: (123) 456-7890
Jason Bobich
first.last@example.com

Inline Labels

Labels are inline elements you can mix in with your text. To create an inline label, add class label-inline to the wrapping element of your label text.

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

Fun Fact

You can use any contextual colors.

Success Information Warning Danger

Success
Information
Warning
Danger

Or any of the color classes from the color library.

Jungle Royal Crimson Asphault

Jungle
Royal
Crimson
Asphault

Code

Inline

Wrap inline snippets of code with <code> tag. Remember to escape the HTML angle brackets. For example —

In HTML we use the <strong> tag to specify bold text.

In HTML we use the &lt;strong&gt; tag to specify bold text.

Pre

When writing a block of code with multiple lines, use the <pre> HTML tag. And again, remember to escape the HTML angle brackets.

<p>Here's an example of a code block using the pre tag.</p>
<pre>

Here's an example of a code block using the pre tag.

</pre>

Note: Looking for syntax highlighting and a way to automatically escape the HTML, like we've done throughout this documentation? We use JavaScript to implement SyntaxHighlighter by Alex Gorbatchev.

User Input

Use the <kbd> to indicate input that is typically entered via keyboard. For example —

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Variables

For indicating variables use the <var> tag.

y = mx + b

y = mx + b

Sample Output

For indicating sample output from a program use the <samp> tag. For example —

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

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