This page demonstrate some default and extra typographical samples and code pieces.

Headlines

Leading paragraphs

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

Small text

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

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>

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

1. <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
2. <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
3. <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
4. <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
5. <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Default blockquote

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

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

Inline Code

Wrap inline snippets of code with <code>.

1. For example,<code>&lt;section&gt;</code> should be wrapped asinline.

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

1. <p>
2. <button class="btn btn-large btn-primary"type="button">Large button</button>
3. <button class="btn btn-large"type="button">Large button</button>
4. </p>
5. <p>
6. <button class="btn btn-primary"type="button">Default button</button>
7. <button class="btn"type="button">Default button</button>
8. </p>
9. <p>
10. <button class="btn btn-small btn-primary"type="button">Small button</button>
11. <button class="btn btn-small"type="button">Small button</button>
12. </p>
13. <p>
14. <button class="btn btn-mini btn-primary"type="button">Mini button</button>
15. <button class="btn btn-mini"type="button">Mini button</button>
16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

1. <button class="btn btn-large btn-block btn-primary"type="button">Block level button</button>
2. <button class="btn btn-large btn-block"type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

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>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

Primary button Button

1. <button type="button" class="btn btn-large btn-primary disabled"disabled="disabled">Primary button</button>
2. <button type="button" class="btn btn-large"disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

1. <a class="btn"href="">Link</a>
2. <button class="btn"type="submit">Button</button>
3. <input class="btn"type="button"value="Input">
4. <input class="btn"type="submit"value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.