Buttons

Button Shortcode [button size="normal" type="primary" value="Primary" href="#"] [button size="normal" type="default" value="Default" href="#"] [button size="normal" type="info" value="Info" href="#"] [button size="normal" type="success" value="Success" href="#"] [button size="normal" type="warning" value="Warning" href="#"] [button size="normal" type="danger" value="Danger" href="#"] [button size="normal" type="inverse" value="Inverse" href="#"] [button size="normal" type="link" value="Link" href="#"]

Button Size

Button Shortcode [button size="large" type="primary" value="Large Button" href="#"] [button size="normal" type="primary" value="Default Button" href="#"] [button size="small" type="primary" value="Small Button" href="#"] [button size="mini" type="primary" value="Mini Button" href="#"]

Labels

Example Shortcode Default [label]Default[/label] Success [label type="success"]Success[/label] Warning [label type="warning"]Warning[/label] Important [label type="important"]Important[/label] Info [label type="info"]Info[/label] Inverse [label type="inverse"]Inverse[/label]

Badges

Example Shortcode 1 [badge]1[/badge] 2 [badge type="success"]2[/badge] 4 [badge type="warning"]4[/badge] 6 [badge type="important"]6[/badge] 8 [badge type="info"]8[/badge] 10 [badge type="inverse"]10[/badge]

Notification

Warning! Best check yo self, you’re not looking too good.
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it’s not super important.

Tabs

Tab title@fat@mdo

Collapce

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci tellus, tincidunt non semper vitae, posuere vel felis. Vivamus ultrices turpis et enim ullamcorper porta. Sed lorem risus, pharetra id porta ut, congue at magna. Mauris gravida enim tincidunt nunc volutpat ac laoreet turpis hendrerit. Ut purus purus, dignissim nec egestas in, pulvinar sit amet leo. Quisque vehicula dignissim urna vel accumsan. Sed elit ligula, ullamcorper quis pharetra eget, ornare at quam. Donec rutrum venenatis aliquam. Aenean eros nulla, ultricies vitae tincidunt eu, cursus tempus lorem.Ut tempor, dui ac rhoncus sodales, ipsum turpis facilisis felis, sed semper nibh sem porta felis. Proin nec eleifend magna. Curabitur felis dolor, vestibulum nec condimentum eget, eleifend vel quam. Pellentesque rhoncus, enim eget rhoncus volutpat, nibh nisl condimentum augue, convallis gravida odio leo id neque. Nulla tempus, felis sit amet sollicitudin sodales, neque risus sollicitudin elit, sit amet suscipit mauris neque non neque. Fusce consequat condimentum odio eu congue. Ut porttitor, quam venenatis congue eleifend, lacus eros egestas tortor, ac vulputate mi quam vitae velit.
Duis elementum, diam id porttitor sagittis, enim nisi feugiat ipsum, non iaculis ante lectus at risus. Aliquam ultrices ipsum et dolor dictum sed lacinia quam pulvinar. Sed quis leo sem. Ut orci justo, placerat eget convallis eget, venenatis sed mi. Ut at nulla vel augue varius rhoncus eu nec diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Integer in orci orci, nec feugiat dui.
Sed fringilla, ante nec blandit pretium, ante velit venenatis nisi, nec pretium eros mi id nibh. Ut sagittis odio ac leo lacinia lacinia. Ut congue purus eget mi venenatis mollis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris et sem lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor pretium massa, non scelerisque tortor condimentum id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer urna nisi, tempor a molestie sed, pellentesque at justo.

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6
[h1]This is a Heading 1[/h1]
[h2]This is a Heading 2[/h2]
[h3]This is a Heading 3[/h3]
[h4]This is a Heading 4[/h4]
[h5]This is a Heading 5[/h5]
[h6]This is a Heading 6[/h6]

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5
This is a Heading 6
[h1 type="bold"]This is a Heading 1[/h1]
[h2 type="bold"]This is a Heading 2[/h2]
[h3 type="bold"]This is a Heading 3[/h3]
[h4 type="bold"]This is a Heading 4[/h4]
[h5 type="bold"]This is a Heading 5[/h5]
[h6 type="bold"]This is a Heading 6[/h6]

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com
[address][strong]Twitter, Inc.[/strong]
795 Folsom Ave, Suite 600
San Francisco, CA 94107
[abbr title="Phone"]P:[/abbr] (123) 456-7890[/address]
[address][strong]Full Name[/strong]
[hyperlink href="mailto:#"]first.last@gmail.com[/hyperlink][/address]

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

[blockquote cite="Someone famous Source Title"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.[/blockquote]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

[blockquote-right cite="Someone famous Source Title"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.[/blockquote-right]

Tooltips

Tooltip Shortcode Tooltip on top [tooltip title="Tooltip on top"]Tooltip on top[/tooltip] Tooltip on right [tooltip title="Tooltip on right" placement="right"]Tooltip on right[/tooltip] Tooltip on bottom [tooltip title="Tooltip on bottom" placement="bottom"]Tooltip on bottom[/tooltip] Tooltip on left [tooltip title="Tooltip on left" placement="left"]Tooltip on left[/tooltip]

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a

terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Table

# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
[table]
[table-head]
[tr]
[th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th]
[/tr]
[/table-head]
[table-body]
[tr]
[td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td]
[/tr]
[tr]
[td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td]
[/tr]
[tr]
[td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td]
[/tr]
[/table-body]
[/table]

table-striped

# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
[table type="table-striped"]
[table-head]
[tr]
[th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th]
[/tr]
[/table-head]
[table-body]
[tr]
[td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td]
[/tr]
[tr]
[td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td]
[/tr]
[tr]
[td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td]
[/tr]
[/table-body]
[/table]


table-bordered

# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
[table type="table-bordered"]
[table-head]
[tr]
[th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th]
[/tr]
[/table-head]
[table-body]
[tr]
[td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td]
[/tr]
[tr]
[td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td]
[/tr]
[tr]
[td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td]
[/tr]
[/table-body]
[/table]

table-hover

# First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
[table type="table-hover"]
[table-head]
[tr]
[th]#[/th][th]First Name[/th][th]Last Name[/th][th]Username[/th]
[/tr]
[/table-head]
[table-body]
[tr]
[td]1[/td][td]Mark[/td][td]Otto[/td][td]@mdo[/td]
[/tr]
[tr]
[td]2[/td][td]Jacob[/td][td]Thornton[/td][td]@fat[/td]
[/tr]
[tr]
[td]3[/td][td]Larry[/td][td]the Bird[/td][td]@twitter[/td]
[/tr]
[/table-body]
[/table]


Row Classes

# Product Payment Taken Status 1 TB – Monthly 01/04/2012 Approved 2 TB – Monthly 02/04/2012 Declined 3 TB – Monthly 03/04/2012 Pending 4 TB – Monthly 04/04/2012 Call in to confirm
[table]
[table-head]
[tr]
[th]#[/th][th]Product[/th][th]Payment Taken[/th][th]Status[/th]
[/tr]
[/table-head]
[table-body]
[tr type="success"]
[td]1[/td][td]TB - Monthly[/td][td]01/04/2012[/td][td]Approved[/td]
[/tr]
[tr type="error"]
[td]2[/td][td]TB - Monthly[/td][td]02/04/2012[/td][td]Declined[/td]
[/tr]
[tr type="warning"]
[td]3[/td][td]TB - Monthly[/td][td]03/04/2012[/td][td]Pending[/td]
[/tr]
[tr type="info"]
[td]4[/td][td]TB - Monthly[/td][td]04/04/2012[/td][td]Call in to confirm[/td]
[/tr]
[/table-body]
[/table]