# Bootstrap TouchSpin

Bootstrap 5.3.0 Demo

Demonstrating TouchSpin compatibility with Bootstrap 5

← Back to Main Demo Bootstrap 3 Demo Bootstrap 4 Demo

### Bootstrap 5 Features

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

- Simplified input group structure (no prepend/append wrapper divs)
- Direct `input-group-text` elements
- Bootstrap 5's CSS custom properties (CSS variables)
- Enhanced color system and utilities
- Modern spacing and typography
- Bootstrap Icons integration

## Basic Examples

Simple TouchSpin:

##### Code:

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

With Prefix & Postfix:

##### Code:

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

Currency (callbacks):
Try typing: `$1,234abc` or `1000.5` then press Enter / blur / use arrows. Value will normalize and format to `$1,234.50`.

##### Code (callbacks):

    const before = (raw) => (raw ?? '').replace(/[^\d\.\-]/g, '');
    const after  = (numStr) => {
      const n = parseFloat(numStr);
      if (!isFinite(n)) return '';
      return new Intl.NumberFormat('en-US', {
        style: 'currency', currency: 'USD',
        minimumFractionDigits: 2, maximumFractionDigits: 2
      }).format(n);
    };

    $("input[name='demo2cb']").TouchSpin({
      min: 0, max: 100000, step: 0.5, decimals: 2,
      callback_before_calculation: before,
      callback_after_calculation:  after
    });

High Precision Decimals:

##### Code:

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

## Bootstrap 5 Sizing

Small Size:

##### Code:

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

Large Size:

##### Code:

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

## Vertical Buttons

Vertical with Bootstrap Icons:

##### Code:

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

## Bootstrap 5 Input Groups

Modern Input Group (No wrapper divs):

##### Code:

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

## Bootstrap 5 Color System

Modern Button Colors:

##### Code:

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

Bootstrap 5 Color Variants:

##### Code:

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

## Advanced Features

Large Input Group:
$ .00

##### Code:

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

With Floating Label:
Floating Label

##### Code:

    <div class="form-floating">
      <input class="form-control" placeholder="Enter value">
      <label>Floating Label</label>
    </div>

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

Performance Booster:

##### Code:

    $("input[name='demo12']").TouchSpin({
      min: 0,
      max: 50000,
      step: 25,
      booster: true,
      boostat: 2,
      maxboostedstep: 2500,
      postfix: " GB"
    });

## Form Validation

Bootstrap 5 Validation:
Perfect score!
Invalid State:
Value too low, minimum is 20.

## Bootstrap 5 Specific Build

##### Version-Specific Build

This demo uses the Bootstrap 5 specific build (`jquery.bootstrap-touchspin-bs5.js`) with optimized input group structure for best performance.