Core Code
Core Code Modern Dev Handbook

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)

example Basic Button Group open example example Outline Button Group open example example Button Group Sizes open example example Vertical Button Group open example example Button Toolbar open example example Button Group with Dropdown open example example Pagination Style Buttons open example