Form Input Groups

Default Input group

Add span with .input-group-textclass before<input>

@

Input group with Right Addon

Add span with .input-group-textclass after<input>

@example.com

Input group Addon on both side

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

Input group with radio

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

Input Groups Sizing

Extra Large Input group

Add .input-group-xlclass to .input-groupfor Xlarge addon.

$

Large Input group

Add .input-group-lgclass to .input-groupfor Large addon.

@

Default Input group

Default Input Group addon.

.00

Small Input group

Add .input-group-smclass to .input-groupfor small addon.

@example.com
Input Groups Buttons

Input group Button On Left

Add button inside of .input-group-prependand class before<input>

Input group Button On Right

Add button inside of .input-group-appendclass and after<input>

Input group Button On Both Side

Add button inside of .input-group-prepend or .input-group-appendclass and before & after<input>

Input group Icon Button On Left

Add button inside of .input-group-prependclass and before<input>

Input group Button On Right

Add button inside of .input-group-appendclass and after<input>

Input group Button On Both Side

Add button inside of .input-group-prepend or .input-group-appendclass and before & after<input>

Buttons with Dropdown