Nearby lessons
12 of 39🔘 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
🎨 Button Toolbar Example
🎨 Vertical Button Groups
🎨 Nested Button Groups
✅ 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 QuestionsProgress: 0 / 3
Keep Going!BS5 Badges