# Bootstrap TouchSpin

Bootstrap 4.6.2 Demo

Demonstrating TouchSpin compatibility with Bootstrap 4

← Back to Main Demo ← Bootstrap 3 Demo Bootstrap 5 Demo →

### Bootstrap 4 Features

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

- `input-group-prepend` and `input-group-append` wrapper classes
- `input-group-text` for addons and custom content
- Bootstrap 4 button styles and modern form controls
- Flexbox-based layout system
- Enhanced spacing and typography

## 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.001,
      decimals: 3
    });

## Bootstrap 4 Sizing

Small Size (form-control-sm):

##### Code:

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

Large Size (form-control-lg):

##### Code:

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

## Vertical Buttons

Vertical Layout with Icons:

##### Code:

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

## Bootstrap 4 Input Groups

Advanced Input Group with Prepend/Append:

##### Code:

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

## Custom Styling

Custom Button Colors:

##### Code:

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

Bootstrap 4 Button Variants:

##### Code:

    $("input[name='demo9']").TouchSpin({
      buttondown_class: "btn btn-info",
      buttonup_class: "btn btn-warning",
      prefix: "Qty:",
      postfix: " units"
    });

## Advanced Bootstrap 4 Features

Input Group Sizing:
$
.00

##### Code:

    <div class="input-group input-group-lg">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input ... class="form-control">
      <div class="input-group-append">
        <span class="input-group-text">.00</span>
      </div>
    </div>

With Validation States:
Looks good!

##### Code:

    <input class="form-control is-valid" ...>
    <div class="valid-feedback">Looks good!</div>

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

## Performance & Features

Fast Increment with Booster:

##### Code:

    $("input[name='demo12']").TouchSpin({
      min: 0,
      max: 10000,
      step: 10,
      booster: true,
      boostat: 3,
      maxboostedstep: 1000,
      postfix: " MB"
    });

## Bootstrap 4 Specific Build

##### Version-Specific Build

This demo uses the Bootstrap 4 specific build (`jquery.bootstrap-touchspin-bs4.js`) with optimized `input-group-prepend` and `input-group-append` classes for best performance.