How to create switch in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Switch in Bootstrap: Simple Guide

To create a switch in Bootstrap, use a checkbox input with the classes form-check and form-switch on a wrapping div. This changes the checkbox into a toggle switch style with minimal code.

📐

Syntax

Use a div with class form-check form-switch to wrap a checkbox input and its label. The checkbox input gets the class form-check-input, and the label uses form-check-label.

form-check: Base class for form controls.
form-switch: Changes checkbox to a switch style.
form-check-input: Styles the input element.
form-check-label: Styles the label linked to the input.

html

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

Output

A toggle switch with label 'Default switch checkbox input' that can be turned on or off.

💻

Example

This example shows a working Bootstrap switch that toggles on and off with a label. It uses Bootstrap 5 classes and requires Bootstrap CSS linked in your HTML.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Switch Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="customSwitch1">
      <label class="form-check-label" for="customSwitch1">Enable notifications</label>
    </div>
  </div>
</body>
</html>

Output

A webpage with a toggle switch labeled 'Enable notifications' that can be switched on or off.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap switches include:

Forgetting to add form-switch class, which keeps the checkbox as a normal box.
Not linking the label to the input using the for attribute and matching id.
Missing Bootstrap CSS link, so styles do not apply.

html

<!-- Wrong: Missing form-switch class -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="wrongSwitch">
  <label class="form-check-label" for="wrongSwitch">Wrong switch</label>
</div>

<!-- Correct: Includes form-switch class -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="rightSwitch">
  <label class="form-check-label" for="rightSwitch">Correct switch</label>
</div>

Output

Two checkboxes: the first looks like a normal checkbox, the second looks like a toggle switch.

📊

Quick Reference

Summary tips for Bootstrap switches:

Wrap checkbox input in div.form-check.form-switch.
Use input.form-check-input[type=checkbox] inside.
Label with label.form-check-label and link with for and id.
Include Bootstrap CSS for styles.

✅

Key Takeaways

Add the class form-switch to the form-check container to create a toggle switch style.

Always link the label to the input using matching for and id attributes for accessibility.

Include Bootstrap CSS in your project to see the switch styles.

Without form-switch, the checkbox remains a normal box, not a switch.

Bootstrap switches are simple checkboxes styled for modern UI toggles.