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

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

Input group with Right Addon

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

Input group Addon on both side

@example.com

Input group with Radio

Input group with radio

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

Input group with Right Addon

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

Input group Addon on both side

@example.com

Input group with Switchery

Input group with Switchery

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

Input group with Right Switchery

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

Input group with switchery on both side

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

Input Groups Buttons

Input group Button On Left

Add button inside before <input>

Input group Button On Right

Add button inside after <input>

Input group Button On Both Side

Add button inside before & after <input>

Input group Icon Button On Left

Add button inside before <input>

Input group Button On Right

Add button inside after <input>

Input group Button On Both Side

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

Color options

Default Input group

Add color using .bg-COLORNAME class to the addon.

@

Input group with Right Addon

Add color using .bg-COLORNAME class to the addon.

Input group Addon on both side

Add color using .bg-COLORNAME class to the addon and input with lighten/darken color.

.00

Input group Button On Left

Input group Button On Right

Input group Button On Both Side

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.

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 and add .input-sm class to input.

Spinners Color Options

Primary Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-primary for Primary color spinner.

Secondray Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-secondary for Primary color spinner.

Success Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-success for Success color spinner.

Danger Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-danger for Danger color spinner.

Info Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-info for Info color spinner.

Warning Touchspin

set data-bts-button-down-class & data-bts-button-up-class attribute and add value as btn btn-warning for Warning color spinner.