X

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]

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