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

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

Unordered

This will display a list of items in which the order does not explicitly matter.

1. <ul>
2. <li>...</li>
3. </ul>

Ordered

This will display a list of items in which the order does explicitly matter (numbered list).

1. <ol>
2. <li>...</li>
3. </ol>

Unstyled

This will display a list of items with no list-style or additional left padding.

1. <ul class="unstyled">
2. <li>...</li>
3. </ul>

Description

A list of terms with their associated descriptions.

1. <dl>
2. <dt>...</dt>
3. <dd>...</dd>
4. </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>.

1. 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).

1. <table class="table table-striped">
2. …
3. </table>

.table-hover

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

1. <table class="table table-hover">
2. …
3. </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.

1. <form>
2. <legend>Legend</legend>
3. <label>Label name</label>
4. <input type="text" placeholder="Type something…">
5. <span class="help-block">Example block-level help text here.</span>
6. <label class="checkbox">
7. <input type="checkbox"> Check me out
8. </label>
9. <button type="submit" class="btn">Submit</button>
10. </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.

1. <form class="form-search">
2. <input type="text" class="input-medium search-query">
3. <button type="submit" class="btn">Search</button>
4. </form>

Inline form

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

1. <form class="form-inline">
2. <input type="text" class="input-small" placeholder="Email">
3. <input type="password" class="input-small" placeholder="Password">
4. <label class="checkbox">
5. <input type="checkbox"> Remember me
6. </label>
7. <button type="submit" class="btn">Sign in</button>
8. </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

1. <form class="form-horizontal">
2. <div class="control-group">
3. <label class="control-label" for="inputEmail">Email</label>
4. <div class="controls">
5. <input type="text" id="inputEmail" placeholder="Email">
6. </div>
7. </div>
8. <div class="control-group">
9. <label class="control-label" for="inputPassword">Password</label>
10. <div class="controls">
11. <input type="password" id="inputPassword" placeholder="Password">
12. </div>
13. </div>
14. <div class="control-group">
15. <div class="controls">
16. <label class="checkbox">
17. <input type="checkbox"> Remember me
18. </label>
19. <button type="submit" class="btn">Sign in</button>
20. </div>
21. </div>
22. </form>

Default options

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

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

Search form

1. <form class="form-search">
2. <div class="input-append">
3. <input type="text" class="span2 search-query">
4. <button type="submit" class="btn">Search</button>
5. </div>
6. <div class="input-prepend">
7. <button type="submit" class="btn">Search</button>
8. <input type="text" class="span2 search-query">
9. </div>
10. </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.

1. <div class="form-actions">
2. <button type="submit" class="btn btn-primary">Save changes</button>
3. <button type="button" class="btn">Cancel</button>
4. </div>

Help text

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

Inline help

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

Block help

1. <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.

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

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

1. <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
2. <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.