Examples

Create a series of buttons with the [button] shortcode wrapped in the [button-group] shortcode.

Button group with icon only

[button-group]
[button link="#" text="" size="default" type="" icon="align-left"]
[button link="#" text="" size="default" type="" icon="align-justify"]
[button link="#" text="" size="default" type="" icon="align-center" white=""]
[button link="#" text="" size="default" type="" icon="align-right"]
[/button-group]

Button group with icon

[button-group]
[button link="#" text="Button 1" size="" type="primary"]
[button link="#" text="Button 2" size="" type="warning"]
[button link="#" text="Button 3" size="" type="inverse"]
[button link="#" text="Button 4" size="" type="danger"]
[/button-group]

Button group with icon and text

[button-group]
[button link="#" text="Button 1" size="" type="primary" icon="circle-arrow-down"]
[button link="#" text="Button 2" size="" type="warning" icon="circle-arrow-left"]
[button link="#" text="Button 3" size="" type="inverse" icon="circle-arrow-right"]
[button link="#" text="Button 4" size="" type="danger" icon="circle-arrow-up"]
[/button-group]

Labels

Content Here
[label type="default"]Content Here[/label]
Content Here
[label type="success"]Content Here[/label]
Content Here
[label type="warning"]Content Here[/label]
Content Here
[label type="important"]Content Here[/label]
Content Here
[label type="info"]Content Here[/label]
Content Here
[label type="inverse"]Content Here[/label]

Badges

Content Here
[badge type="default"]Content Here[/badge]
Content Here
[badge type="success"]Content Here[/badge]
Content Here
[badge type="warning"]Content Here[/badge]
Content Here
[badge type="important"]Content Here[/badge]
Content Here
[badge type="info"]Content Here[/badge]
Content Here
[badge type="inverse"]Content Here[/badge]

Standard alert

Choice of four different alert styles.

Your content here
[alert type="success" close="no"] Your content here [/alert]
Your content here
[alert type="warning" close="no"] Your content here [/alert]
Your content here
[alert type="danger" close="no"] Your content here [/alert]
Your content here
[alert type="info" close="no"] Your content here [/alert]

Alert with dismiss button

Add a button to dismiss the alert notice.

Your content here
[alert type="success" close="yes"] Your content here [/alert]
Your content here
[alert type="warning" close="yes"] Your content here [/alert]
Your content here
[alert type="danger" close="yes"] Your content here [/alert]
Your content here
[alert type="info" close="yes"] Your content here [/alert]

Examples and markup

Basic

Default progress bar with a vertical gradient.

[progress val="60" type="info" striped="" active=""]

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

[progress val="60" type="info" striped="1" active=""]

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

[progress val="40" type="info" striped="1" active="1"]

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

[progress val="20" type="info" striped="" active=""]

[progress val="40" type="success" striped="" active=""]

[progress val="60" type="warning" striped="" active=""]

[progress val="80" type="danger" striped="" active=""]

Striped bars

Similar to the solid colors, we have varied striped progress bars.

[progress val="20" type="info" striped="1" active=""]

[progress val="40" type="success" striped="1" active=""]

[progress val="60" type="warning" striped="1" active=""]

[progress val="80" type="danger" striped="1" active=""]

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.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Live fluid grid example

The fluid grid system uses percents instead of pixels for column widths. It is based on 12 grids per row.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Basic fluid grid shortcode example

Below is an example of a two column grid using a combination of SPAN shortcodes. You can have any combination of spans as long as the total spans equals 12.

[row]
[span size="6"]
Proin urna urna, ultricies et pellentesque id, tincidunt id justo. In at sapien in sapien vestibulum imperdiet in eu lorem. Phasellus arcu neque, consectetur sit amet convallis eu, adipiscing sed turpis. Praesent mauris mauris, dignissim tincidunt placerat et, tristique sit amet quam. Fusce eleifend; enim sed dignissim accumsan, mi nunc lobortis est, ac sollicitudin lectus quam nec sapien. Nullam sollicitudin nisl vulputate nibh dapibus sed pulvinar nisl dignissim. Cras sit amet magna in erat consectetur bibendum ac a urna. Vivamus suscipit est id turpis laoreet a condimentum justo luctus. Mauris ornare nulla massa. Ut auctor; ante et faucibus ultrices, tellus dolor sodales dolor, ut mollis ipsum velit vitae augue. Nam velit nunc, sollicitudin non mattis nec, pharetra quis ipsum! Proin semper volutpat leo, ac aliquam lectus faucibus non. Vestibulum tincidunt condimentum hendrerit.
[/span]
[span size="6"]
Cras eleifend, ligula vitae semper cursus, ante ligula sodales ipsum, sit amet fermentum augue nulla id tortor. Vivamus pharetra, quam quis volutpat volutpat, purus quam iaculis mi, et dignissim mauris metus at urna. Aliquam tincidunt ante sit amet risus feugiat lacinia. Mauris a est orci, fringilla facilisis turpis. Nunc eros risus, ullamcorper sit amet tristique eleifend; porttitor id turpis. Ut eu turpis dui. Suspendisse non neque sit amet diam scelerisque sollicitudin ut faucibus urna. Mauris gravida, odio sit amet congue auctor, erat mauris sodales felis, eu adipiscing turpis metus eget enim! Vivamus sit amet risus leo. Donec semper lacinia nulla vel mattis. Vestibulum convallis ultricies leo vitae congue. Suspendisse at vulputate lacus.
[/span]
[/row]

Result...

Proin urna urna, ultricies et pellentesque id, tincidunt id justo. In at sapien in sapien vestibulum imperdiet in eu lorem. Phasellus arcu neque, consectetur sit amet convallis eu, adipiscing sed turpis. Praesent mauris mauris, dignissim tincidunt placerat et, tristique sit amet quam. Fusce eleifend; enim sed dignissim accumsan, mi nunc lobortis est, ac sollicitudin lectus quam nec sapien. Nullam sollicitudin nisl vulputate nibh dapibus sed pulvinar nisl dignissim. Cras sit amet magna in erat consectetur bibendum ac a urna. Vivamus suscipit est id turpis laoreet a condimentum justo luctus. Mauris ornare nulla massa. Ut auctor; ante et faucibus ultrices, tellus dolor sodales dolor, ut mollis ipsum velit vitae augue. Nam velit nunc, sollicitudin non mattis nec, pharetra quis ipsum! Proin semper volutpat leo, ac aliquam lectus faucibus non. Vestibulum tincidunt condimentum hendrerit.
Cras eleifend, ligula vitae semper cursus, ante ligula sodales ipsum, sit amet fermentum augue nulla id tortor. Vivamus pharetra, quam quis volutpat volutpat, purus quam iaculis mi, et dignissim mauris metus at urna. Aliquam tincidunt ante sit amet risus feugiat lacinia. Mauris a est orci, fringilla facilisis turpis. Nunc eros risus, ullamcorper sit amet tristique eleifend; porttitor id turpis. Ut eu turpis dui. Suspendisse non neque sit amet diam scelerisque sollicitudin ut faucibus urna. Mauris gravida, odio sit amet congue auctor, erat mauris sodales felis, eu adipiscing turpis metus eget enim! Vivamus sit amet risus leo. Donec semper lacinia nulla vel mattis. Vestibulum convallis ultricies leo vitae congue. Suspendisse at vulputate lacus.