Converts Bootstrap Checkboxes Into Toggle Switches – TiTatoggle

Category: Form , Javascript | January 14, 2019
Author: kleinejan
Views Total: 421
Official Page: Go to website
Last Update: January 14, 2019
License: GPL-2.0

Preview:

Converts Bootstrap Checkboxes Into Toggle Switches – TiTatoggle

Description:

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:

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>

You Might Be Interested In:


Leave a Reply