Master Twitter Bootstrap using WordPress Shortcodes. Part 2: Labels

Yesterday saw the release of version 0.8 of our WordPress Bootstrap CSS plugin for WordPress.

We added the ability to use special WordPress Shortcodes to tap into the power of Twitter Bootstrap design elements.

Today we’re going to look at the Shortcode for ‘Labels‘.

Twitter Bootstrap Label Shortcode in WordPress

The Shortcode provided for labels is the following:

TBS_LABEL

Here is a quick example. If you type into a Post/Page the following text:

[TBS_LABEL class="default"]This is a Twitter Bootstrap Label used for highlighting[/TBS_LABEL]

you will receive section of highlighted text like this:

This is a Twitter Bootstrap Label used for highlighting

As with the Twitter Bootstrap Buttons, you have several options for the colour styling for labels. They are as follows:

• success
• warning
• important
• notice

Simply replace the “default” text for the class parameter in the example with any of the 4 options above. (Note: if you want to use the default, you don’t actually need to specify any class parameter)

Optional Parameters for the Twitter Bootstrap Label Shortcode

You have the option to pass in a couple of parameters to help you tweak your Twitter Bootstrap Labels.

The following parameters are accepted:

• class="class1 class2"
• id="mySpecialLabelID"
• style="CSS:value"

They are basically identical to their HTML attribute equivalents allowing you full control in styling your Twitter Labels by adding them to CSS classes, giving them CSS IDs or even directly styling them.

If you have any questions about Twitter Bootstrap Labels, please don’t hesitate to comment below.

We hope you enjoy the functionality we’ve provided with the WordPress Bootstrap CSS plugin.