Bootstrap 5 Button Groups
Grouping buttons together for better organization
🔲 What are Button Groups?
Button groups allow you to combine multiple buttons into a single component. They're perfect for toolbars, pagination, or any interface where related actions should be visually grouped together for better organization and user experience.
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Output:
🔹 Basic Button Group
Consolidated button groups improve interface organization while maintaining individual functionality and visual cohesion across all interaction contexts. Wrap related button elements in a .btn-group container to create visually connected controls that function as a cohesive unit while maintaining individual action capabilities. Button groups eliminate unnecessary spacing between related actions, reducing visual noise and clarifying functional relationships. This pattern is ideal for toolbars, segmented controls, or related action clusters where visual connection reinforces conceptual grouping. Ensure button groups maintain keyboard accessibility with proper tab order and focus management. Button group implementation improves interface efficiency by reducing visual scanning time and clarifying action relationships—enhancing user experience metrics that search engines monitor when evaluating content quality and usability across devices.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">One</button>
<button type="button" class="btn btn-primary">Two</button>
<button type="button" class="btn btn-primary">Three</button>
</div>Output:
🔹 Button Toolbar
Button Toolbars (.btn-toolbar) combine multiple button groups into a single, cohesive horizontal bar. This creates a structured, space-efficient layout with consistent spacing between groups, ideal for complex interfaces like text editors, dashboards, or admin panels. By grouping related actions, toolbars improve usability and reduce visual clutter. They are highly customizable, support responsive behavior, and ensure that related controls are visually and functionally grouped. Using .btn-toolbar enhances both the design and accessibility of action-heavy interfaces, making it easier for users to navigate and execute tasks efficiently.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">5</button>
</div>
</div>Output:
🔹 Button Group Sizing
Button Group Sizing allows uniform resizing of all buttons within a group using container-level classes like .btn-group-lg or .btn-group-sm. Instead of applying size classes to each button individually, you adjust the entire group at once, ensuring consistency and saving development time. This is particularly useful in toolbars, forms, or navigation components where visual harmony is critical. Large groups draw attention to primary actions, while small groups fit compact spaces. Bootstrap’s sizing utilities maintain proper padding, font scaling, and border-radius across all buttons within the grouped container.
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">Large</button>
<button type="button" class="btn btn-primary">Group</button>
</div>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-primary">Small</button>
<button type="button" class="btn btn-primary">Group</button>
</div>Output:
🔹 Vertical Button Group
Vertical Button Groups (.btn-group-vertical) stack buttons in a vertical column instead of horizontally. This layout is ideal for sidebars, mobile interfaces, or narrow spaces where horizontal real estate is limited. Buttons are joined seamlessly, creating a clean, compact navigation or action panel. Vertical groups improve touch targets on mobile devices and help organize related actions in a scannable list. They support the same features as horizontal groups—including dropdowns, sizing, and mixed styles—while optimizing for vertical layout constraints and improving user interaction in space-constrained designs.
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Top</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Bottom</button>
</div>Output:
🔹 Mixed Button Styles
Mixed Button Styles allow you to combine different button types—like solid, outline, or varied colors—within a single group. This creates visual hierarchy and helps users distinguish between primary, secondary, and tertiary actions. For example, a primary solid button can be paired with outline buttons for less critical options. This technique improves usability by guiding attention to key actions while maintaining a cohesive design system. Mixed styles are widely used in forms, toolbars, and dashboards to enhance interaction clarity without sacrificing aesthetic unity or Bootstrap’s built-in responsiveness.
<div class="btn-group" role="group">
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-outline-secondary">Cancel</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>Output:
🔹 Button Group with Dropdown
Button Groups with Dropdowns integrate dropdown menus into button groups to save space and organize related actions. By combining standard buttons with a dropdown toggle, you can create compact, clutter-free interfaces—commonly seen in toolbars, editors, or data tables. The dropdown can contain secondary or less-frequent options, keeping the UI clean while maintaining full functionality. This pattern improves user efficiency, supports progressive disclosure, and works seamlessly with Bootstrap’s JavaScript components. It’s especially useful in admin panels, CRUD interfaces, and applications with extensive action sets.
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Action</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
More
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
</ul>
</div>
</div>