How to create and use Button Group in Bootstrap

How to create and use Button Group in Bootstrap


In the previous Bootstrap lesson, readers read along with Taimienphi.vn to learn how to create and edit Button (button) in Bootstrap. In the next lesson below, Taimienphi.vn will introduce you more about Button Group in Bootstrap.


The following lesson will show you how to create a Button Group in Bootstrap. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about List Group in Bootstrap.

Button Group in Bootstrap

Table of Contents:
1. Create Button Group in Bootstrap
2. Create buttons in the Toolbar
3. Specify the height for Button Group
4. Button Group nested
5. Arrange Button Group vertically
6. Align Button Group appropriately

1. Create Button Group in Bootstrap

In addition to creating and editing buttons with predefined layers, Bootstrap also allows users to group a series of buttons together in the same line using the Button Group.

To create Button Group in Bootstrap, we just need to use the class .btn in the element div to wrap buttons and apply layers .btn-group up there.

For example: The following example illustrates how to create a Button Group in Bootstrap:

button group in bootstrap

The output will look like the following:

button group in bootstrap 2

2. Create buttons in the Toolbar

We can also group buttons together to create more complex elements like buttons in the toolbar.

To create buttons in the Toolbar, we just need to wrap the Button Groups in the element div and apply the class .btn-toolbar up there as in the example below:

button group in bootstrap 3

The output will look like the following:

button group in bootstrap 4

3. Specify the height for Button Group

Instead of applying size assigning layers to the buttons in each group, we only need to apply size assignments to Button Group such as .btn-group-lg or .btn-group-sm directly for each element .btn-group to create nodes that are larger or smaller than in the example below:

button group in bootstrap 5

The output will look like the following:

button group in bootstrap 6

4. Button Group nested

In addition, we can nest Button Buttons together.

For example: In the example below illustrates how to nest classes .btn-group in class .btn-group to create a drop-down menu in button group.

button group in bootstrap 7

The output will look like the following:

button group in bootstrap 8

5. Arrange Button Group vertically

If desired, we can arrange the Button Group to display vertically instead of horizontally. To do this, simply replace the class .btn-group by grade .btn-group-vertical as in the example below:

button group in bootstrap 9

The output will look like the following:

button group in bootstrap 10

6. Align Button Group appropriately

Finally, we can drag the Button Group to fill the width of the site by applying utility layer .d-flex for the element .btn-group. In this case the nodes will be allocated equal width.

button group in bootstrap 11

The output will look like the following:

button group in bootstrap 12

In the Bootstrap lesson above, Taimienphi.vn just introduced you to Button Group in Bootstrap. If you have any questions or questions, you can leave your comments in the comments section below.

https://thuthuat.taimienphi.vn/button-group-in-bootstrap-51115n.aspx
In the next lesson, Taimienphi.vn will introduce you further image in Bootstrap.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *