iOS Style Switches For Bootstrap 4 – Custom Switch

Category: CSS & CSS3 , Form | May 8, 2019
Author: haubek
Views Total: 3,480
Official Page: Go to website
Last Update: May 8, 2019
License: MIT

Preview:

iOS Style Switches For Bootstrap 4 – Custom Switch

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

You Might Be Interested In:


One thought on “iOS Style Switches For Bootstrap 4 – Custom Switch

Leave a Reply