VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-checks-and-radios-checkbox-toggle-buttons/

⇱ Bootstrap 5 Checks and radios Checkbox Toggle buttons - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Checks and radios Checkbox Toggle buttons

Last Updated : 30 Jul, 2024

Bootstrap 5 Checks and radios Checkbox Toggle buttons are a way of visualizing the checkboxes as buttons and primarily the .form-check is changed to .btn-check and the .form-check-label is changed to buttons classes. There are three toggle states, the first is checked followed by unchecked and disabled in which all can be done by adding or not adding some attributes. 

Bootstrap 5 Checks and radios Checkbox Toggle buttons Classes:

  • btn-check: The class is used to specify that the input is for a button-type checkbox.

Syntax:

<input type="checkbox" class="btn-check" checked/disabled>
<label class="btn" for="btn-check">...</label>

Example 1: In the code below all the three toggle states are demonstrated and the output shows them, in action:

Output:

👁 p1-ezgifcom-optimize


Example 2: The code below demonstrates how we can use button groups with checkbox toggle buttons and also we can set sizes of the buttons:

Output:

👁 p2-ezgifcom-optimize


Reference:https://getbootstrap.com/docs/5.0/forms/checks-radios/#checkbox-toggle-buttons

Comment
Article Tags:

Explore