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>
Input group Addon on both side
Add span with .input-group-text
class to before & after <input>
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
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
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.
Small Input group
Add .input-group-sm
class to .input-group
for small addon.
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.