bhylu.com

Advertisements

Bootstrap 5 Button Groups

Group adjacent buttons without implying a radio selection that the controls do not implement.

How it works

A button group gives related controls a visual relationship. Add a group name when it helps assistive technology explain their purpose. If only one option can be selected, use real radio inputs or implement the complete selection pattern instead of colouring one arbitrary button active. This example is a styled command group for a local design exercise; it does not claim to navigate dates or save a preference. Keep touch targets and focus indicators usable even when the buttons are compact.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

Try in playground

The preview injects local Bootstrap CSS when you select Run code. It blocks external resources and actual form submission; nothing runs on import. Bootstrap plugin scripts are not loaded there.

Example

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Name a Group of Related Commands</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<div class="btn-group" role="group" aria-label="Schedule navigation samples"><button type="button" class="btn btn-outline-primary">Earlier</button><button type="button" class="btn btn-outline-primary">Today</button><button type="button" class="btn btn-outline-primary">Later</button></div><p class="mt-3 mb-0">These buttons demonstrate grouping; date navigation is not connected.</p>
</main>
</body>
</html>

Expected result

Three adjacent buttons share a named group and preserve their normal keyboard order.

The outer group affects borders and alignment without changing each button’s command semantics. The explanatory note makes the deliberately unconnected action boundary honest. For a real schedule, update both the displayed date and a meaningful result announcement rather than changing only the highlighted button.

Check Bootstrap’s official 5.3 documentation for component contracts and version details.