Bootstrap 5 Switches

Create consistent cross-browser and cross-device switches with our custom switch component, built on top of Bootstrap's form controls.

Basic Switches
Default

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

Switch Sizes
Sizing

Use custom CSS classes to create different sized switches for various use cases.

Large Switch
Default Switch
Small Switch
Colored Switches
Custom Colors

Custom colored switches using Bootstrap's color palette.

Settings Panel
Configuration

Use switches in forms and settings panels for better user experience.

Email Notifications
Receive email updates about your account
Push Notifications
Get push notifications on your device
SMS Notifications
Receive SMS alerts for important updates
Marketing Emails
Receive promotional content and offers
Privacy Settings
Security

Control your privacy and security preferences.

Profile Visibility
Make your profile visible to others
Two-Factor Authentication
Add an extra layer of security
Activity Tracking
Allow us to track your activity
Data Analytics
Share anonymous usage data
Switches with Icons
Enhanced

Enhanced switches with icon indicators for better visual feedback.

Dark Mode Toggle
WiFi Connection
Sound Control
Location Services
Form Integration
Forms

Use switches in forms for better user experience and clear yes/no options.

Account Preferences
Interactive Examples
JavaScript

Switches with JavaScript event handlers and state management.

Status Indicator
Offline
Toggle to change system status
Feature Toggle
✓ Advanced Analytics
✓ Priority Support
✓ Custom Themes