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

New Hampshirite building web apps in Florida. Creator of Surreal CMS, Postleaf, and DirtyMarkup.

Need to get in touch? Catch me on Twitter.