Input group addons
Extend form controls by adding text or buttons before, after, or on both sides of any text-based
.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 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 spinnersTouch friendly input spinner component
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.
Depending on your needs, you can easily swith off mousewheel support, change steps and increments, use more complex examples with button groups and dropdowns.
Touchspin supports default Bootstrap
input-group component sizing classes, applied to the input or wrapped in
div with these classes.
Also Touchspin library supports
vertical spinner controls orientation, that appear on the right side. Buttons and icons are fully customizable.