Form Input Groups

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 radio

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

Input Groups Sizing

Extra Large Input group

Add .input-group-xl class to .input-group for Xlarge addon.

$

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 of .input-group-prepend and class before <input>

Input group Button On Right

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

Input group Button On Both Side

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

Input group Icon Button On Left

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

Input group Button On Right

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

Input group Button On Both Side

Add button inside of .input-group-prepend or .input-group-append class and 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