Converts Bootstrap Checkboxes Into Toggle Switches – TiTatoggle

TiTatoggle is a CSS extension to the Bootstrap framework that converts the regular checkbox inputs into different types of toggle switches.

Supports both Bootstrap 4 and Bootstrap 3.

Supported types:

• Toggle button (Default)
• iOS
• Material

See also:

• Best Checkbox And Radio Input Replacement Libraries
• Best Toggle Switch JavaScript And CSS Libraries
• 10 Best Toggle switch jQuery Plugins

How to use it:

Include the stylesheet titatoggle-dist.css after Bootstrap’s CSS.

<link href="bootstrap.css" rel="stylesheet">
<link href="titatoggle-dist.css" rel="stylesheet">

Add the following CSS classes to the checkbox elements and done.

• checkbox-slider–default: Default Theme
• checkbox-slider–a-rounded: With ON/OFF text
• checkbox-slider–a-rounded: Rounded borders
• checkbox-slider–b: iOS theme
• checkbox-slider–b-flat: Flat iOS theme
• checkbox-slider–c: Material Design theme
• checkbox-slider–c-weight: Slim Material theme

<div class="form-check checkbox-slider--default">
  <label>
    <input type="checkbox">
    <span>Default Theme</span>
  </label>
</div>
<div class="form-check checkbox-slider--a-rounded">
  <label>
    <input type="checkbox">
    <span>Rounded Corner</span>
  </label>
</div>
<div class="form-check checkbox-slider--a">
  <label>
    <input type="checkbox">
    <span>With On/Off Text</span>
  </label>
</div>
<div class="form-check checkbox-slider--b">
  <label>
    <input type="checkbox">
    <span>iOS Style</span>
  </label>
</div>
<div class="form-check checkbox-slider--b-flat">
  <label>
    <input type="checkbox">
    <span>iOS + Flat Style</span>
  </label>
</div>
<div class="form-check checkbox-slider--c">
  <label>
    <input type="checkbox">
    <span>Material Design Style</span>
  </label>
</div>
<div class="form-check checkbox-slider--c-weight">
  <label>
    <input type="checkbox">
    <span>Slim Material Design Style</span>
  </label>
</div>

Change the size of the switches.

• checkbox-slider-sm: Small
• checkbox-slider-md: Medium
• checkbox-slider-lg: Large

<div class="form-check checkbox-slider--default checkbox-slider-sm">
  <label>
    <input type="checkbox">
    <span>Default Theme</span>
  </label>
</div>
<div class="form-check checkbox-slider--default checkbox-slider-md">
  <label>
    <input type="checkbox">
    <span>Default Theme</span>
  </label>
</div>
<div class="form-check checkbox-slider--default checkbox-slider-lg">
  <label>
    <input type="checkbox">
    <span>Default Theme</span>
  </label>
</div>