Input Group

A group for input to display information in before or after input

Basic Input Groups

Add span with .input-group-textclass before<input>for input-group-prepend and add span with .input-group-textclass after<input>for input-group-append.

@
@example.com
$.00

Multiple Inputs

While multiple <input>s are supported visually,validation styles are only available for input groups with a single <input>.

First and last name

Multiple Addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$0.00
$0.00

Input Groups with Checkboxes and Radios

Input Groups can use with checkboxes and radio buttons also. For it add code for .checkboxclass and .radioclass respectively.

Input Groups with different sizes

Add .input-group-{lg/sm}class to .input-groupfor Large/Small addon/prepend.

Small
Default
Large

Input Groups with Buttons

Add <button>before or after <input>tag

Input Groups with Dropdown

Add <button>with .dropdown-toggleclass and add dropdown-menu after it to get input group with dropdown.

Custom file input