Bootstrap 4 Switches

Here is a fully customizable switch component I created for Bootstrap 4.

  • Fully customizable via Sass variables
  • Fully accessible
  • No JavaScript required


Here's all the markup you need to create a switch.

<span class="switch">
<input type="checkbox" class="switch" id="switch-id">
<label for="switch-id">Small switch</label>

You can use the switch-sm and switch-lg modifiers to create small and large variations.

Check out the demo to see how they work. When you're ready to use them, just grab the code is in the CSS panel of this pen.

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.