BUTTON GROUPS

If adding single button is not enough for you, it is possible to create the buttons as a stacked group in JTB_MD too.

Usage

Just wrap a series of .jtbButtons with .jtbButtonGroup. That's all, let the JTB_MD do the rest for you.

			Copy
			<div class='jtbButtonGroup'>
	<button class='jtbButton'>Left</button>
	<button class='jtbButton'>Middle</button>
	<button class='jtbButton'>Right</button>
</div>
		

Rounded group

If you wan tto make your button group more rounded, you can add .jtbButtonGroupRounded to your .jtbButtonGroup.

			Copy
			<div class='jtbButtonGroup jtbButtonGroupRounded'>
	<button class='jtbButton'>Left</button>
	<button class='jtbButton'>Middle</button>
	<button class='jtbButton'>Right</button>
</div>
		

Sizing

To change the size of the button groups size; simply change the jtbButtons' sizes.







			Copy
			<div class='jtbButtonGroup'>
	<button class='jtbButton jtbButton_lg'>Left</button>
	<button class='jtbButton jtbButton_lg'>Middle</button>
	<button class='jtbButton jtbButton_lg'>Right</button>
</div>

<div class='jtbButtonGroup'>
	<button class='jtbButton jtbButton_md'>Left</button>
	<button class='jtbButton jtbButton_md'>Middle</button>
	<button class='jtbButton jtbButton_md'>Right</button>
</div>

<div class='jtbButtonGroup'>
	<button class='jtbButton jtbButton_sm'>Left</button>
	<button class='jtbButton jtbButton_sm'>Middle</button>
	<button class='jtbButton jtbButton_sm'>Right</button>
</div>

<div class='jtbButtonGroup'>
	<button class='jtbButton jtbButton_xs'>Left</button>
	<button class='jtbButton jtbButton_xs'>Middle</button>
	<button class='jtbButton jtbButton_xs'>Right</button>
</div>
		

Vertical orientation

You can change the orienation of the button group with adding .jtbButtonGroupVertical class into your group element.

			Copy
			<div class='jtbButtonGroup jtbButtonGroupVertical'>
	<button class='jtbButton'>Top</button>
	<button class='jtbButton'>Middle</button>
	<button class='jtbButton'>Bottom</button>
</div>