Create Post
2
Contacts
10
Messages
3
Gallery
Settings
Plugins
Jane Smith Back

Hey! How's it going?

1:20:42 PM

Not bad... i guess. What about you? Haven't gotten any updates from you in a long time.

1:20:46 PM

Yeah! I've been a bit busy lately. I'll get back to you soon enough.

1:20:54 PM

Alright, take care then.

1:21:01 PM

Account Summary
Current Balance
$71,182
Account Type
Business Plan A
Monthly
$19.99
Upgrade Account

Pending Tasks (5)
Backend Development
Today 25%
Bug Fix
Tomorrow 17%
Javascript Code
70%
Preparing Documentation
6%
App Development
20%
View all Pending

Storage Space
1.31 GB of 1.50 GB used
87.3%

Server Status
  1. Dashboard
  2. UI Elements
  3. Typography

Typography

Headings

Heading 1

 Weight 300, Size 38px

Heading 2

 Weight 300, Size 32px

Heading 3

 Weight 300, Size 24px

Heading 4

 Weight 400, Size 18px
Heading 5
 Weight 400, Size 14px
Heading 6
 Weight 400, Size 12px

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.

Example Address

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

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

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.

Alignment Classes

Left aligned text.

Center aligned text.

Right aligned text.

Descriptions

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.

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.

Lists

Unordered List

A list of items in which the order does not explicitly 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.

Ordered List

A list of items in which the order does explicitly 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.

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>