Headings

Heading 1 Secondary

Heading 2 Secondary

Heading 3 Secondary

Heading 4 Secondary

Heading 5 Secondary
Heading 6 Secondary

Example Address

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

Alignment Classes

Left aligned text.

Center aligned text.

Right aligned text.

Block Level Descriptions

A list of terms with their associated descriptions.

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 doesexplicitly matter (numbered list).

  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.

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

Blockquotes

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

  • 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 prettyprintclass, and for line numbers add the linenumsclass.

<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>
Demo Settings
Fixed Header
Boxed Layout
Collapse Leftbar
Topnav
Sidebar