Toggle Button Group

Create selectable buttons using radio inputs and btn-group.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<div class="btn-group" role="group">

<input type="radio" class="btn-check" name="options" id="opt1" checked>
<label class="btn btn-outline-primary" for="opt1">Option 1</label>

<input type="radio" class="btn-check" name="options" id="opt2">
<label class="btn btn-outline-primary" for="opt2">Option 2</label>

<input type="radio" class="btn-check" name="options" id="opt3">
<label class="btn btn-outline-primary" for="opt3">Option 3</label>

</div>

</div>

</body>
</html>

More BS5 Button Groups Examples (7)