Button Groups
Bootstrap Button Groups are a versatile component that allows multiple buttons to be grouped together on a single line. This feature is particularly useful for creating a set of related actions or tools within a confined space. Bootstrap’s button group classes enable developers to visually combine buttons, making interfaces cleaner and more intuitive. They are often used in toolbars, form actions, pagination, and more, providing a seamless way to present multiple actions in a unified, compact manner.
Classes for Bootstrap Button Groups
Here’s a table of classes used specifically for creating button groups in Bootstrap:
Class Name | Description |
.btn-group | The base class to group a series of buttons together on a single line. |
.btn-group-lg, .btn-group-sm | Adjust the size of the buttons within the group (large or small). |
.btn-toolbar | Combine multiple button groups into a single toolbar. |
.btn-group-vertical | Stack the button group vertically instead of horizontally. |
role=”group” | An ARIA role to indicate that the grouped buttons share a common purpose. |
.dropdown-toggle | Used in conjunction with a button group to create a dropdown within the group. |
Code Examples with Explanation
1. Basic Button Group:
– This example creates a basic group of three buttons aligned horizontally. The `btn-group` class groups them together, and `role=”group”` is used for accessibility.
2. Button Toolbar:
– This code snippet demonstrates how to combine multiple button groups into a toolbar. The `btn-toolbar` class is used to group the button groups together, making it suitable for complex toolsets.
3.Vertical Button Group:
– Here, buttons are stacked vertically using the `btn-group-vertical` class. This is useful when vertical space is more appropriate for the UI layout.
4.Button Group with Dropdown:
Responsive Design
Bootstrap’s responsive design adjusts to different screen sizes. This is achieved through a series of media queries and a mobile-first approach.
Your First Bootstrap Page
Let’s put this into practice. Replace the `<h1>` tag in your basic template with the following Bootstrap navbar component:
– This example combines a regular button and a dropdown button in one group. The `dropdown-toggle` class is used for the button that triggers the dropdown menu.
YouTube Reference :
1) Button Groups in Hindi/Urdu Part-1
2) Button Groups in Hindi/Urdu Part-2
