Author: | haubek |
---|---|
Views Total: | 16,354 views |
Official Page: | Go to website |
Last Update: | May 8, 2019 |
License: | MIT |
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
thx bro
where to apply xs class as its not working