Form Input Groups

Default Input group

Add .input-group-prepend .input-group-text class before <input>

@

Input group with Right Addon

Add .input-group-append .input-group-text class after <input>

@example.com

Input group Addon on both sides

You can use both at the same time.

$
.00

Input group addon with Spinner

Use i.spinner inside .input-group-text.

Input group addon with Right Spinner

Use i.spinner inside .input-group-text.

Input group addon with Spinner both side

You can use both at the same time.

Input group with checkbox

Add .input-group-text before <input> and add checkbox inside.

Input group with radio

Add .input-group-text before <input> and add radio inside.

Input Group Sizes

Large Input group

Add .input-group.input-group-lg for large addon.

@

Small Input group

Add .input-group.input-group-sm for small addon.

@example.com
Input Groups Buttons and Dropdowns

Input group Button On Left

Input group Button On Right

Input group Button On Both Side

Input group Dropdown On Left

Input group Dropdown On Right