1. Home
  2. Form Components
  3. Input Groups

Input Groups

Input Groups with diffrent elements and styles.

Advanced CardButtons Extended

Enhance form controls using buttons, icons, text to before, after, or on both sides of any <input>. Use .input-group class with an .input-group-addon class to prepend or append elements to a .form-control. Place one add-on or button on either side of an input. You may also place one on both sides of an input. It does not support multiple add-ons on a single side, nor multiple form-controls in a single input group.

Default Input group

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

@

Input group with Right Addon

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

@example.com

Input group Addon on both side

Add span with .input-group-addon 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-addon class before <input> text and Add checkbox inside.

Input group with Right Addon

Add span with .input-group-addon 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-addon class before <input> text and Add radio inside.

Input group with Right Addon

Add span with .input-group-addon 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-addon class before <input> text and Add switchery inside.

Input group with Right Switchery

Add span with .input-group-addon 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

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

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

Wrap using .has-danger class for danger validation.

@example.com

Wrap using .has-success class for success validation.

@

Wrap using .has-warning class for warning validation.

$ .00

Wrap using .has-danger and wrap sub element with .form-control-danger to display with icon.

@example.com

Wrap using .has-success and wrap sub element with .form-control-success to display with icon.

@

Wrap using .has-warning and wrap sub element with .form-control-warning to display with icon.

$ .00

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

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.