Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Body copy

<p>...</p>

Inline text elements

Marked text

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to <mark>highlight</mark> text.

Deleted text

For indicating blocks of text that have been deleted use the <del> tag.

<del>This line of text is meant to be treated as deleted text.</del>

Strikethrough text

For indicating blocks of text that are no longer relevant use the <s> tag.

<s>This line of text is meant to be treated as no longer accurate.</s>

Inserted text

For indicating additions to the document use the <ins> tag.

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

Underlined text

To underline text use the <u> tag.

<u>This line of text will render as underlined</u>

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

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

Bold

For emphasizing a snippet of text with a heavier font-weight.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

<em>rendered as italicized text</em>

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

Basic abbreviation

<abbr title="attribute">attr</abbr>

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

<ul> <li>...</li> </ul>

Ordered

A list of items in which the order does explicitly matter.

<ol> <li>...</li> </ol>