Headings

All HTML headings, <h1> through <h6> are available.

Built with Less

The typographic scale is based on two LESS variables in variables.less: @baseFontSize and @baseLineHeight. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

<em>

For emphasizing a snippet of text with stress

<em>rendered as italicized text</em>

<strong>

For emphasizing a snippet of text with important

<strong>rendered as bold text</strong>

<p class="success">...</p>

<p class="info">...</p>

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.

<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="attribute" class="initialism">attr</abbr>

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>

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>

Unstyled

A list of items with no list-style or additional left padding.

<ul class="unstyled">   <li>...</li> </ul>

Description

A list of terms with their associated descriptions.

<dl>   <dt>...</dt>   <dd>...</dd> </dl>

Note: 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.

Inline

Wrap inline snippets of code with <code>.

For example, <code><section></code> should be wrapped as inline.

Note: 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.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

<table class="table table-striped">   … </table>

.table-hover

Enable a hover state on table rows within a <tbody>.

<table class="table table-hover">   … </table>

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

<form>   <legend>Legend</legend>   <label>Label name</label>   <input type="text" placeholder="Type something…">   <span class="help-block">Example block-level help text here.</span>   <label class="checkbox">     <input type="checkbox"> Check me out   </label>   <button type="submit" class="btn">Submit</button> </form>

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

<form class="form-search">   <input type="text" class="input-medium search-query">   <button type="submit" class="btn">Search</button> </form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

<form class="form-inline">   <input type="text" class="input-small" placeholder="Email">   <input type="password" class="input-small" placeholder="Password">   <label class="checkbox">     <input type="checkbox"> Remember me   </label>   <button type="submit" class="btn">Sign in</button> </form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

• Add .form-horizontal to the form
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

<form class="form-horizontal">   <div class="control-group">     <label class="control-label" for="inputEmail">Email</label>     <div class="controls">       <input type="text" id="inputEmail" placeholder="Email">     </div>   </div>   <div class="control-group">     <label class="control-label" for="inputPassword">Password</label>     <div class="controls">       <input type="password" id="inputPassword" placeholder="Password">     </div>   </div>   <div class="control-group">     <div class="controls">       <label class="checkbox">         <input type="checkbox"> Remember me       </label>       <button type="submit" class="btn">Sign in</button>     </div>   </div> </form>

Default options

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

<div class="input-prepend">   <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"> </div> <div class="input-append">   <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span> </div>

Search form

<form class="form-search">   <div class="input-append">     <input type="text" class="span2 search-query">     <button type="submit" class="btn">Search</button>   </div>   <div class="input-prepend">     <button type="submit" class="btn">Search</button>     <input type="text" class="span2 search-query">   </div> </form>

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

<div class="form-actions">   <button type="submit" class="btn btn-primary">Save changes</button>   <button type="button" class="btn">Cancel</button> </div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help

<input type="text"><span class="help-inline">Inline help text</span>

Block help

<input type="text"><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a> <a href="#" class="btn btn-large disabled">Link</a>

Note: We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.