Shortcodes

[h2]We have lots of custom shortcodes, here are just a few![/h2]

Buttons, Labels, Alerts & Progress Bars

Button Button Shortcode Description

Default `[ button ]..[ /button ]` Standard gray button with gradient

`[ button color="blue" ]..[ /button ]` Identifies the primary action in a set of buttons

`[ button color="aqua" ]..[ /button ]` Used as an alternate to the default styles

`[ button color="green" ]..[ /button ]` Indicates a successful or positive action

`[ button color="orange" ]..[ /button ]` Indicates caution should be taken with this action

`[ button color="red" ]..[ /button ]` Indicates a dangerous or potentially negative action

`[ button color="black" ]..[ /button ]` Alternate dark gray button, not tied to a semantic action or use

Adding links

The default link is # but you can change this by adding `linkurl="http://linkgoeshere.com"`.

Multiple sizes

Fancy larger or smaller buttons? Add `size="large"`, `size="small"`, or `size="mini"` for two additional sizes.

[hr]

Button	Button Shortcode	Description
Default	`[ button ]..[ /button ]`	Standard gray button with gradient
	`[ button color="blue" ]..[ /button ]`	Identifies the primary action in a set of buttons
	`[ button color="aqua" ]..[ /button ]`	Used as an alternate to the default styles
	`[ button color="green" ]..[ /button ]`	Indicates a successful or positive action
	`[ button color="orange" ]..[ /button ]`	Indicates caution should be taken with this action
	`[ button color="red" ]..[ /button ]`	Indicates a dangerous or potentially negative action
	`[ button color="black" ]..[ /button ]`	Alternate dark gray button, not tied to a semantic action or use

Inline labels

Labels	Markup
Default	`[ label ]..[ /label ]`
Success	`[ label type="green" ]..[ /label ]`
Warning	`[ label type="orange" ]..[ /label ]`
Important	`[ label type="red" ]..[ /label ]`
Info	`[ label type="blue" ]..[ /label ]`
Inverse	`[ label type="black" ]..[ /label ]`

Badges

Name	Example	Markup
Default	1	`[ badge ]..[ /badge ]`
Success	2	`[ badge type="green" ]..[ /badge ]`
Warning	4	`[ badge type="orange" ]..[ /badge ]`
Error	6	`[ badge type="grey" ]..[ /badge ]`
Info	8	`[ badge type="blue" ]..[ /badge ]`
Inverse	10	`[ badge type="black" ]..[ /badge ]`

Alerts

×
Warning! Best check yo self, you’re not looking too good.
Thanks…

<div class="alert">
  ...
</div>

×
Oh snap! Change a few things up and try submitting again.

[ alert type="alert-error"
  ...
[ /alert ]

×
Well done! You successfully read this important alert message.

[ alert type="alert-success"
  ...
[ /alert ]

×
Heads up! This alert needs your attention, but it’s not super important.

[ alert type="alert-info"
  ...
[ /alert ]

Progress bars

[ progress_bar percentage="60" ]

[ progress_bar percentage="60" striped="yes" ]

[ progress_bar percentage="60" striped="yes" active="yes" ]

Additional colors

Striped bars

Behavior

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

[hr]

Table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

<table class="table table-striped">

</table>

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter