A few days ago I outlined how to make full use of the WordPress shortcode provided for making full use of Twitter Bootstrap Buttons.
Today, I’m going to outline how you can use our new shortcode for creating Twitter Bootstrap Button Groups.
Button Groups are easy! Here’s goes…
What are Twitter Bootstrap Button Groups?
Button groups are collections of Buttons that are related in some way and you want to illustrate this relationship visually to the user.
It doesn’t matter why you think they’re related, if they’re related you can display this by using the Button Group feature provided in Twitter Bootstrap.
The WordPress shortcode to use in this case is:
This shortcode alone has no use. It needs to be used in conjunction with buttons.
So to do this you simply place Twitter buttons within the Button Group shortcode as shown in the following example:
[TBS_BUTTONGROUP] .. [TBS_BUTTON] .. [TBS_BUTTON].. [TBS_BUTTON]..[/TBS_BUTTONGROUP]
Some Twitter Bootstrap Button Group Examples
Let’s try some examples.
First, if you’re not too familiar the buttons, check out our complete guide on using Twitter Bootstrap Buttons here.
With the following code:
[TBS_BUTTONGROUP style="margin:20px"][TBS_BUTTON text="button 1"/][TBS_BUTTON text="button 2"/][TBS_BUTTON text="button 3"/][/TBS_BUTTONGROUP]
you will get the 3 buttons grouped together as seen below:
There are 2 things to note from this example.
- As with all our components, we offer the option to include in-line CSS styling either through “style”, and also with “class” and “id” definitions. Here I added a margin of 20px to the DIV that will hold the button group so it looks ok on the page.
[TBS_BUTTONGROUP]shortcode must have a corresponding closing tag (
[/TBS_BUTTONGROUP]) to indicate the completion of the button group definition.
Twitter Bootstrap Button Groups Toggle Functionality
With Twitter Bootstrap version 2.0, a new toggle functionality has been included with the Buttons components.
For button groups, there are currently 2 types of toggle functions:
Specifying these options on the shortcode is easy using the toggle parameter. Currently the ways to specify the type of toggle button group you want are as follows:
- For Checkbox button group:
- For Radio button group:
And it’s as easy as that.
Taking the above example button group, this is how you would create a checkbox toggle group:
[TBS_BUTTONGROUP toggle="buttons-checkbox" style="margin:20px"][TBS_BUTTON text="button 1"/][TBS_BUTTON text="button 2"/][TBS_BUTTON text="button 3"/][/TBS_BUTTONGROUP]
As you can see, Twitter Bootstrap Buttons Groups are easy with the WordPress Twitter Bootstrap CSS plugin.
Any questions or feedback, please drop them to us in the comments section below.