# Bootstrap TouchSpin

Bootstrap 3.4.1 Demo

Demonstrating TouchSpin compatibility with Bootstrap 3

← Back to Main Demo Bootstrap 4 Demo →

### Bootstrap 3 Features

This demo showcases Bootstrap TouchSpin working with Bootstrap 3.4.1, featuring:

- `input-group-btn` and `input-group-addon` classes
- Bootstrap 3 button styles and sizing classes
- Classic Bootstrap 3 form controls and layouts
- Automatic Bootstrap version detection

## Basic Examples

Simple TouchSpin:

#### Code:

    $("input[name='demo1']").TouchSpin();

With Prefix & Postfix:

#### Code:

    $("input[name='demo2']").TouchSpin({
      prefix: '$',
      postfix: '.00',
      min: 0,
      max: 1000
    });

Decimal Values:

#### Code:

    $("input[name='demo3']").TouchSpin({
      min: 0,
      max: 10,
      step: 0.01,
      decimals: 2
    });

## Sizing Examples

Small Size:

#### Code:

    <input class="form-control input-sm" ...>
    $("input[name='demo4']").TouchSpin();

Large Size:

#### Code:

    <input class="form-control input-lg" ...>
    $("input[name='demo5']").TouchSpin();

## Vertical Buttons

Vertical Layout:

#### Code:

    $("input[name='demo6']").TouchSpin({
      verticalbuttons: true,
      verticalup: '<i class="fa fa-plus"></i>',
      verticaldown: '<i class="fa fa-minus"></i>'
    });

## Bootstrap 3 Input Groups

Advanced Input Group:

#### Code:

    <div class="input-group">
      <span class="input-group-addon">
        <i class="fa fa-calculator"></i>
      </span>
      <input ... class="form-control">
      <div class="input-group-btn">
        <button class="btn btn-success">Apply</button>
        ...
      </div>
    </div>

## Custom Styling

Custom Button Classes:

#### Code:

    $("input[name='demo8']").TouchSpin({
      buttondown_class: "btn btn-danger",
      buttonup_class: "btn btn-success",
      buttondown_txt: '<i class="fa fa-minus"></i>',
      buttonup_txt: '<i class="fa fa-plus"></i>'
    });

## Advanced Features

With Booster & Limits:

#### Code:

    $("input[name='demo9']").TouchSpin({
      min: 0,
      max: 1000,
      step: 5,
      booster: true,
      boostat: 5,
      maxboostedstep: 100,
      postfix: " items"
    });

Force Step Divisibility:

#### Code:

    $("input[name='demo10']").TouchSpin({
      min: 0,
      max: 100,
      step: 5,
      forcestepdivisibility: 'round'
    });

## Bootstrap 3 Specific Build

Version-Specific Build: This demo uses the Bootstrap 3 specific build (`jquery.bootstrap-touchspin-bs3.js`) for optimal performance and compatibility.