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.