iOS Style Switches For Bootstrap 4 – Custom Switch

Author: haubek
Views Total: 13,595 views
Official Page: Go to website
Last Update: May 8, 2019
License: MIT


iOS Style Switches For Bootstrap 4 – Custom Switch


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>

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 class="custom-switch-content-unchecked">
    <span class="text-danger">I'm unchecked</span>


v1.1.2 (05/08/2019)


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



  • support for disabled attribute

See also  Creating Google+ Style Jagged Borders with Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *