iOS Style Switches For Bootstrap 4 – Custom Switch

Preview:

Description:

Custom Switch is a pure CSS extension for the Bootstrap 4 framework that converts the regular checkboxes into iOS style toggle buttons (switches).

How to use it:

Insert the Custom Switch stylesheet into your Bootstrap 4 project.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<link href="dist/css/component-custom-switch.css" rel="stylesheet">

The required HTML structure.

<div class="custom-switch custom-switch-label-io">
  <input class="custom-switch-input" id="example_1" type="checkbox">
  <label class="custom-switch-btn" for="example_1"></label>
</div>

Set the initial state to ‘Unchecked’. With checked/unchecked information.

<div class="custom-switch custom-switch-label-yesno">
  <input class="custom-switch-input" id="example_3" type="checkbox">
  <label class="custom-switch-btn" for="example_3"></label>
  <div class="custom-switch-content-checked">
    <span class="text-success">I'm checked</span>
  </div>
  <div class="custom-switch-content-unchecked">
    <span class="text-danger">I'm unchecked</span>
  </div>
</div>

Changelog:

v1.1.2 (05/08/2019)

• Fixed line-height

02/18/2019

• Bootstrap upgrade + accessibility styling
• Accessibility + required and validation styling

09/19/2018

• sm and xs sizes.

09/15/2018

• support for disabled attribute