Form Input Groups

Default

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

@

Right Addon

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

@example.com

Addon on both side

Add .input-group-prepend & .input-group-append classes for before & after addon to <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-prepend class before <input> text and Add checkbox inside.

Input group with radio

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

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

Use .input-group-prepend class and add button inside before <input>

Input group Button On Right

Use .input-group-btn class and add button inside after <input>

Input group Button On Both Side

Use .input-group-prepend and .input-group-append class before & after <input>

Input group Icon Button On Left

Use .input-group-prepend class and add button with icon inside before <input>

Input group Icon Button On Right

Use .input-group-append class and add icon button inside after <input>

Input group Button On Both Side

Use .input-group-prepend and .input-group-append class before & after <input>

Buttons with Dropdown

Input group Dropdown On Right

Input group Dropdown On Left

Input group Dropdown On Both Side