Bootstrap 5 Checks and Radios Radio Toggle Buttons use buttons instead of round-shaped radio buttons. This can be achieved by removing the form-check-label class from the label element of the radio and adding the btn class to it. Variations of buttons like outlined styles can also be used instead of plain buttons.
Bootstrap 5 Checks and radios Radio Toggle Buttons Class:
- btn-check: This class is used to hide the default round radio toggle.
Syntax:
<input type="radio" class="btn-check" name="gfg" id="id1" checked> <label for="id1" class="btn btn-success">...</label> ...
Example 1: This example shows the use of Radio toggle buttons which used buttons as radio toggles.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap5 Checks and Radios Radio Toggle Buttons
</strong>
</div>
<p class="mt-1">
The Selected options turn a little darker
</p>
<p class="mt-3">
Do you want to be a Software Engineer?
</p>
<input type="radio" name="sde" id="yes" checked>
<label for="yes" class="btn btn-success">
Yes
</label>
<input type="radio" name="sde" id="no">
<label for="no" class="btn btn-danger">
No
</label>
</div>
</body>
</html>
|
Output:
Example 2: This example shows the use of the radio toggle buttons using outlined buttons.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>
Bootstrap5 Checks and Radios Radio Toggle Buttons
</strong>
</div>
<p class="mt-3">Choose your favorite Subject</p>
<input type="radio" class="btn-check" name="subject" id="os">
<label for="os" class="btn btn-outline-success">
Operating Systems
</label>
<input type="radio" class="btn-check" name="subject" id="db">
<label for="db" class="btn btn-outline-danger">
DBMS
</label>
<input type="radio" class="btn-check" name="subject" id="cn" checked>
<label for="cn" class="btn btn-outline-warning">
Computer Networks
</label>
<input type="radio" class="btn-check" name="subject" id="ds">
<label for="ds" class="btn btn-outline-info">
Data Structures
</label>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.2/forms/checks-radios/#radio-toggle-buttons