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 classes — text-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 Blvd123 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
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
<strong>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>
Here's an example of a code block using the pre tag.
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.