Headings
All HTML headings, <h1> through <h6> are available.
Bootstrap’s global default font-size is 13px, with a line-height of 19px. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their line-height (10px by default).
Lead body copy
Make a paragraph stand out by adding .lead.
<p class="lead">...</p>
Emphasis
Make use of HTML’s default emphasis tags with lightweight styles.
<small>
For de-emphasizing inline or blocks of text, use the small tag.
Bold
For emphasizing a snippet of text with a heavier font-weight.
Italics
For emphasizing a snippet of text with italics.
Heads up! Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.
Abbreviations
Stylized implemenation 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.
<abbr>
For expanded text on long hover of an abbreviation, include the title attribute.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
Add .initialism to an abbreviation for a slightly smaller font-size.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Addresses
Present contact information for the nearest ancestor or the entire body of work.
<address>
Preserve formatting by ending all lines with <br>.
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">[email protected]</a> </address>
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 options
Style and content changes for simple variations on a standard blockquote.
Naming a source
Add <small> tag 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> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>
Alternate displays
Use .pull-right for a floated, right-aligned blockquote.
<blockquote class="pull-right"> ... </blockquote>
Lists
Unordered
A list of items in which the order does not explicitly matter.
Ordered
A list of items in which the order does explicitly matter.
Unstyled
A list of items with no list-style or additional left padding.
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
<ul class="unstyled"> <li>...</li> </ul>
Description
A list of terms with their associated descriptions.
Horizontal description
Make terms and descriptions in <dl> line up side-by-side.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
Heads up!
Horizontal description lists will truncate terms that are too long to fit in the left column fix text-overflow. In narrower viewports, they will change to the default stacked layout.
Code
Inline
Wrap inline snippets of code with <code>.
Basic block
Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.
Heads up! Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.
You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.
Images
Add classes to an <img> element to easily style images in any project.
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.