Buzz
This tutorial will guide you through creating Button Groups in Bootstrap. Additionally, readers can explore other tutorials on Mytour to learn more about List Groups in Bootstrap.
Button Group in Bootstrap
1. Creating Button Groups in Bootstrap
2. Creating Buttons in Toolbar
3. Specifying Height for Button Group
4. Nested Button Groups
5. Vertical Button Group Arrangement
6. Aligning Button Groups Appropriately
1. Creating Button Groups in Bootstrap
Besides allowing the creation and customization of buttons using predefined classes, Bootstrap also enables users to group a series of buttons together in the same line using Button Group.
To create Button Groups in Bootstrap, we simply use the .btn class within a div element to wrap the buttons and apply the .btn-group class on it.
Example: The following example illustrates how to create a Button Group in Bootstrap:
The output result looks like this:
2. Creating Buttons in Toolbar
Additionally, we can group buttons together to create more complex components such as buttons in the toolbar.
To create buttons in the toolbar, simply wrap the Button Group in a div element and apply the .btn-toolbar class on it as shown in the example below:
The output result looks like this:
3. Specifying Height for Button Group
Instead of applying size-specific classes to buttons within each group, we can directly apply size-specific classes such as .btn-group-lg or .btn-group-sm to each .btn-group element to create larger or smaller buttons as shown in the example below:
The output result appears as follows:
4. Nested Button Groups
Additionally, we can also nest Button Groups within each other.
Example: In the example below, it illustrates how to nest the .btn-group class within another .btn-group class to create dropdown menus within a button group.
The output result appears as follows:
5. Vertical Button Group
If desired, we can arrange the Button Group to display vertically instead of horizontally. To achieve this, simply replace the .btn-group class with the .btn-group-vertical class as shown in the example below:
The output result appears as follows:
6. Aligning Button Group Appropriately
Finally, we can stretch the Button Group to fill the width of the webpage by applying the utility class .d-flex to the .btn-group element. In this case, the buttons will be evenly distributed in width.
The output result appears as follows:
In this Bootstrap tutorial, Mytour has introduced you to Button Group in Bootstrap. If you have any questions or need further clarification, readers can leave their comments below the article.
In the upcoming lesson, Mytour will continue to introduce you to images in Bootstrap.
