Basic Input Groups
Add span with .input-group-text
class before <input>
for input-group-prepend and add span with .input-group-text
class after <input>
for input-group-append.
Multiple Inputs
While multiple <input>
s are supported visually, validation styles are only available for input groups with a single <input>
.
Multiple Addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Input Groups with Checkboxes and Radios
Input Groups can use with checkboxes and radio buttons also. For it add code for .checkbox
class and .radio
class respectively.
Input Groups with different sizes
Add .input-group-{lg/sm}
class to .input-group
for Large/Small addon/prepend.
Input Groups with Dropdown
Add <button>
with .dropdown-toggle
class and add dropdown-menu after it to get input group with dropdown.