Twitter Bootstrap Button Groups with the WordPress Shortcode: TBS_BUTTONGROUP

by Paul on March 5, 2012

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:

[TBS_BUTTONGROUP]

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.

  1. 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.
  2. the [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:

  1. Checkbox
  2. Radio

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:

  1. For Checkbox button group: toggle="buttons-checkbox"
  2. For Radio button group: toggle="buttons-radio"

And it’s as easy as that.

As outlined in the TBS_BUTTON how-to article, currently our plugin does not supply the necessary javascript to activate the toggle buttons because we haven’t yet been able to create it. We hope with a bit more time this will be over come soon.

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]

And with the right Javascript to activate it, you’ll have a nice toggle button group.

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.

Thanks!

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 1 comment… read it below or add one }

Johnnie P. Durham April 25, 2013 at 8:14 pm

When I add tooltip to button in buttons group then on hover button is growing a little. I’ve got it in table and it cause ugly effect. I include images, maybe that describe problem better.

Reply

Leave a Comment

Previous post:

Next post: