Jonathan Smith

Typography

Headings

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

Heading 1 Secondary

Heading 2 Secondary

Heading 3 Secondary

Heading 4 Secondary

Heading 5 Secondary
Heading 6 Secondary

Example Address

Present contact information for the nearest ancestor or the entire body of work by using <address>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com

Alignment Classes

Easily realign text to components with text alignment classes like <text-left> <text-center> <text-right>.

Left aligned text.

Center aligned text.

Right aligned text.

Block Level Descriptions

Make any <dt> or <dd> element behave like a block level element.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Ordered List

A list of items in which the order does explicitly matter (numbered list). by <ol>

  1. Lorem ipsum dolor sit amet.
  2. Officiis modi ipsum officia ad!
  3. Atque nisi fugit repellat ratione.
  4. Eveniet tenetur reiciendis eaque.
  5. Aperiam accusamus quas nisi?
    1. Assumenda, ipsa hic vel sed?
    2. Quaerat praesentium error.
    3. Magni, excepturi nulla adipisci.
  6. Nesciunt, reprehenderit provident cupiditate atque!
  7. Sit, nobis similique beatae aut.
  8. Eum, debitis veniam laudantium dolor.

Unstyled List

A list of items with no list-style or additional left padding. Remove the default list-style and left padding on list items (immediate children only).

  • Lorem ipsum dolor sit amet.
  • Officiis modi ipsum officia ad!
  • Atque nisi fugit repellat ratione.
  • Eveniet tenetur reiciendis eaque.
  • Aperiam accusamus quas nisi?
    • Assumenda, ipsa hic vel sed?
    • Quaerat praesentium error.
    • Magni, excepturi nulla adipisci.
  • Nesciunt, reprehenderit provident cupiditate atque!
  • Sit, nobis similique beatae aut.
  • Eum, debitis veniam laudantium dolor.

Body Text

p.lead

Onwards to victory!

p

Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit.

small

These men promptly escaped from a maximum security stockade to the Los Angeles underground.

em

Today, still wanted by the government, they survive as soldiers of fortune.

strong

If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team.

del

This line of text is meant to be treated as deleted text.

Blockquotes

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

There is only one thing in the world worse than being talked about, and that is not being talked about

Oscar Wilde in The Picture of Dorian Grey

How glorious it is – and also how painful – to be an exception.

Alfred de Musset

Emphasis classes

.text-muted

Aren’t you a little short for a stormtrooper?

.text-default

That’s no moon, it’s a space station!

.text-success

The Force is strong with this one.

.text-info

I find your lack of faith disturbing.

.text-warning

These aren’t the droids you’re looking for.

.text-danger

May the Force be with you.

Horizontal description

Make terms and descriptions in <dl> line up side-by-side.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Unordered List

A list of items in which the order does explicitly matter by <ul>

  • Lorem ipsum dolor sit amet.
  • Officiis modi ipsum officia ad!
  • Atque nisi fugit repellat ratione.
  • Eveniet tenetur reiciendis eaque.
  • Aperiam accusamus quas nisi?
    • Assumenda, ipsa hic vel sed?
    • Quaerat praesentium error.
    • Magni, excepturi nulla adipisci.
  • Nesciunt, reprehenderit provident cupiditate atque!
  • Sit, nobis similique beatae aut.
  • Eum, debitis veniam laudantium dolor.

Custom Icon List

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

  • List icons (like these)
  • can be used
  • to replace
  • default bullets in lists
  • and can also
    • form sublist
    • each with different
    • icons
  • thanks to baked in support for FontAwesome!

Codes

Inline

Wrap inline snippets of code with <code>.

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

Block

Use <pre> for multiple lines of code.

<p>Sample text here...</p>

Prettify

To add colored syntax highlight to the <pre> tag, then use the prettyprint class, and for line numbers add the linenums class.

                            <div class="form-group">
                            <label for="focusedinput" class="col-xs-3 control-label">Focused Input</label>
                            <div class="col-xs-6">
                            <input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
                            </div>
                            </div>
                        
  • Alerts Get notified on new alerts
  • Notifications Get notified on new notifications
  • Messages Get notified on new messages
  • Warnings Get notified on new warnings
  • Snap to increments
    Amount ($100 increments):
  • Range
    Price range:
  • Maximum
    Maximum Value:
  • Minimum
    Minimum Value: