HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap 5 Checkboxes and Radio buttons

Checkboxes

Bootstrap provides styling and components for checkboxes and radios to enhance their appearance and improve user experience. Here's an example of how you can use Bootstrap to create checkboxes and radios:

Radio buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

Example

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
 <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
 <input type="radio" class="form-check-input" disabled>Option 3
  <label class="form-check-label"></label>
</div>
You can click on above box to edit the code and run again.

Toggle Switches

If you want your checkbox to be styled as a toggle switch, use the .form-switch class together with the .form-check container:

Example

 <div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
You can click on above box to edit the code and run again.

Output