Default Input group

Add span with .input-group-text class before <input>

@

Input group with Right Addon

Add span with .input-group-text class after <input>

@example.com

Input group Addon on both side

Add span with .input-group-text class to before & after <input>

$
.00

Input group addon with Icon

Input group addon with Right Icon

Input group addon with icon both side

Input group addon with Spinner

Input group addon with Right Spinner

Input group addon with Spinner both side

Input group with Checkbox

Input group with checkbox

Input group with radio

Input Groups Sizing

Large Input group

Add .input-group-lg class to .input-group for Large addon.

@

Default Input group

Default Input Group addon.

.00

Small Input group

Add .input-group-sm class to .input-group for small addon.

@example.com

Extra Small Input group

Add .input-group-xs class to .input-group for Xsmall addon.

$

Input Groups Buttons

Input group Button On Left

Add span with .input-group-btn class and add button inside before <input>

Input group Button On Right

Add span with .input-group-btn class and add button inside after <input>

Input group Button On Both Side

Add span with .input-group-btn class and add button inside before & after <input>

Input group Icon Button On Left

Add span with .input-group-btn class and add button inside before <input>

Input group Button On Right

Add span with .input-group-btn class and add button inside after <input>

Input group Button On Both Side

Add span with .input-group-btn class and add button inside before & after <input>

Buttons with Dropdown

Input group Dropdown On Left

Action Another action Something else here Separated link

Input group Dropdown On Right

Action Another action Something else here Separated link

Input group Dropdown On Both Side

Action Another action Something else here Separated link
Action Another action Something else here Separated link

Segmented Buttons with Dropdown

Segmented Button On Left

Action Another action Something else here Separated link

Segmented Button On Right

Action Another action Something else here Separated link

Segmented Buttons On Both Side

Action Another action Something else here Separated link
Action Another action Something else here Separated link

Bootstrap TouchSpin Spinners

Default Touchspin

Add .touchspin class to input to add touchspin input group.

Touchspin with Postfix

Add data-bts-postfix="POSTFIX_VALUE" attribute to input to add postfix to touchspin input group.

Touchspin with Prefix

Add data-bts-prefix="PREFIX_VALUE" attribute to input to add prefix to touchspin input group.

Min Max Value of Touchspin

Use data-bts-min="VALUE" data-bts-max="VALUE" attribute to input to set min and max value of touchspin input group.

Touchspin with initial Value

Add data-bts-init-val="VALUE" attribute attribute to set initial value for input group.

Touchspin steps

Add data-bts-step="VALUE" attribute for increament and decrement steps to touchspin input group.

Decimal Value of Touchspin

Use data-bts-decimal="VALUE" attribute to use decimal value of touchspin input.

vertical Touchspin

Add .touchspin-vertical class for vertical touchspin input group.

Touchspin mousewheel Disable

Add .touchspin-stop-mousewheel class to diable mousewheel.

Change Button Class to link

Add data-bts-button-down-class & data-bts-button-up-class attribute to change button Class.

Touchspin With Icon

Add icon class in data-bts-postfix attribute to icon to postfix as well prefix.

Touchspin Icon Button

Use data-bts-button-down-txt & data-bts-button-up-txt attribute to set touchspin icon button.

Touchspin With Dropdown

Use data-bts-prefix & data-bts-postfix attribute to set Prefix and Postfix to touchspin input with button.

Action Another action Something else here Separated link

Spinners Sizes

Large Horizontal Touchspin

Add .input-group-lg class to input-group.

Default Horizontal Touchspin

Small Horizontal Touchspin

Add .input-group-sm class to input-group.