Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

12 of 39
BS5 AlertsBS5 ButtonsBS5 Button GroupsBS5 BadgesBS5 Progress Bars

🔘 BS5 Button Groups

📖 Bootstrap 5 Button Groups Overview

Bootstrap 5 button groups extend button functionality by grouping related buttons together. They're perfect for toolbars, pagination controls, and segmented controls.

🏗️ Button Group Classes

.btn-group – groups buttons in a single row; use role="group" for accessibility. .btn-toolbar – groups multiple .btn-groups in a row (use role="toolbar"). .btn-group-vertical – stacks buttons vertically. Buttons inside use normal .btn classes; you can put a dropdown inside a .btn-group.

🎨 Basic Button Group Examples

Example03
Loading editor…

🎨 Button Toolbar Example

Example04
Loading editor…

🎨 Vertical Button Groups

Example05
Loading editor…

🎨 Nested Button Groups

Example06
Loading editor…

✅ Button Group Best Practices

  • Use proper ARIA attributes: Include role='group' for accessibility
  • Keep buttons simple: Avoid complex nesting that's hard to navigate
  • Use consistent sizing: Apply uniform button sizes within groups
  • Consider mobile layout: Ensure button groups work on small screens
  • Use semantic HTML: Use button elements for actions
  • Test keyboard navigation: Ensure groups are accessible via keyboard

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3