Headings

All HTML headings, <h1> through <h6>, are available. These are used for page and section headings.

h1. tag heading `h1` `2.1rem`

h2. tag heading `h2` `1.8rem`

h3. tag heading `h3` `1.6rem`

h4. tag heading `h4` `1.4rem`

h5. tag heading `h5` `1.2rem`

h6. tag heading `h6` `1.0rem`

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. These are used for paragraphs of text that should appear larger, or to change the size of a semantic header.

h1. class heading .h1 2.1rem

h2. class heading .h2 1.8rem

h3. class heading .h3 1.6rem

h4. class heading .h4 1.4rem

h5. class heading .h5 1.2rem

h6. class heading .h6 1.0rem

We can also apply the strong to make them bolder

h1. strong heading

h2. strong heading

h3. strong heading

h4. strong heading

h5. strong heading

h6. strong heading

Customising headings

Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.

Fancy display heading With faded secondary text

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1 `.display-1` `6rem`

Display 2 `.display-2` `5.5rem`

Display 3 `.display-3` `4.5rem`

Display 4 `.display-4` `3.5rem`

Intro

Make a paragraph stand out by adding .intro.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 2rem

Make a paragraph stand out by adding .intro .text-red.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 2rem

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. 1.1rem

Inline text elements

Styling for common inline HTML5 elements.

highlight You can use the mark tag to highlight text. mark

~~This line of text is meant to be treated as deleted text.~~ del

~~This line of text is meant to be treated as no longer accurate.~~ s

This line of text is meant to be treated as an addition to the document. ins

This line of text will render as underlined u

This line of text is meant to be treated as fine print. small

This line rendered as bold text. strong

This line rendered as italicized text. em

Paragraph

What happens to normal paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare gravida justo, quis efficitur libero posuere sit amet. Sed maximus sed felis vitae vulputate. Mauris sed dictum urna. Nunc non nulla nec lacus consequat dictum sed ut tortor. Pellentesque habitant morbi ~~tristique senectus~~ et netus et malesuada fames ac turpis egestas. Suspendisse tincidunt felis ac libero porta pharetra. Curabitur molestie eros vel arcu volutpat, a tempus felis pellentesque. Vestibulum a ligula in turpis dapibus consectetur.

Showing line breaks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare gravida justo, quis efficitur libero posuere sit amet.
Sed maximus sed felis vitae vulputate. Mauris sed dictum urna.
Nunc non nulla nec lacus consequat dictum sed ut tortor.
Pellentesque habitant morbi ~~tristique senectus~~ et netus et malesuada fames ac turpis egestas.
Suspendisse tincidunt felis ac libero porta pharetra. Curabitur molestie eros vel arcu volutpat, a tempus felis pellentesque.
Vestibulum a ligula in turpis dapibus consectetur.

Blockquotes

For quoting blocks of content from another source within your document. Wrap <blockquote class="blockquote"> around any HTML as the quote.

Add a <footer class="blockquote-footer"> for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

Lists

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Unordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem