Input group addons
Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>
. Use .input-group
with an .input-group-prepend
to prepend or .input-group-append
to append elements to a single .form-control
. Place one add-on or button on either side of an input. You may also place one on both sides of an input. While multiple <input>
s are supported visually, validation styles are only available for input groups with a single <input>
.
Input group buttons
Optional buttons as addons. Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon
, you'll need to use .input-group-prepend (append)
to wrap the buttons. Input group buttons support all available button options except sizing - all buttons height will be adjusted automatically according to the input group size.
Input group options
Besides default addon options, input groups support different variations of checkboxes, radio buttons, switches, contextual validation state options, icons in different positions. All colors can be easily changed in LESS variables, options and positions also can be mixed. However avoid using <select>
elements here as they cannot be fully styled in WebKit browsers and <textarea>
elements here as their rows attribute will not be respected in some cases.
Touchspin spinners
Touch friendly input spinner componentBootstrap touchspin
Basically Touchspin uses default Bootstrap input-group
component styling with ability to add extra classes to the buttons and addons to match your design perfectly.
Advanced spinners
Depending on your needs, you can easily swith off mousewheel support, change steps and increments, use more complex examples with button groups and dropdowns.
Horizontal spinners
Touchspin supports default Bootstrap input-group
component sizing classes, applied to the input or wrapped in div
with these classes.
Vertical spinners
Also Touchspin library supports vertical
spinner controls orientation, that appear on the right side. Buttons and icons are fully customizable.