# 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.

Default switch checkbox input
Checked switch checkbox input
Disabled switch checkbox input
Disabled checked switch

##### Switch Sizes

Sizing

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

###### Large Switch

Large switch

###### Default Switch

Default switch

###### Small Switch

Small switch

##### Colored Switches

Custom Colors

Custom colored switches using Bootstrap's color palette.

Primary Switch
Secondary Switch
Success Switch
Warning Switch
Info Switch
Danger Switch

##### 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

Dark Mode

###### WiFi Connection

WiFi Enabled

###### Sound Control

Sound Enabled

###### Location Services

Location Access

##### Form Integration

Forms

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

Username
Email

###### Account Preferences

Account Active
Email Verified
Public Profile
Newsletter Subscription

##### Interactive Examples

JavaScript

Switches with JavaScript event handlers and state management.

###### Status Indicator

System Status
Offline
Toggle to change system status

###### Feature Toggle

Premium Features
✓ Advanced Analytics
✓ Priority Support
✓ Custom Themes