Bootstrap button groups are the feature of bootstrap to group a series of button elements in a single line. This can be useful when you want to create the main menu bar or button toolbar.

You need to just use the predefined bootstrap classes to create a bootstrap button group.

Bootstrap Button Groups to Create Basic Grouping

To create a group of buttons, you have to add the series of buttons inside the <div> element with the class .btn-group

The button can be anchor links or button type element to display as a series in a single line. See the example below to create a group of a button using bootstrap.

Output

The above example contains the four series of button elements to display in groups.

Create Button Toolbar

You can also create a more complex component called button toolbar using bootstrap. To create a button toolbar, you have to wrap the series of .btn-group components inside the .btn-toolbar.

See the example below to create your own button toolbar using bootstrap.

Output

Sizing of Bootstrap Button Groups

If you want to create button and resize it to larger, medium and smaller, you can apply bootstrap classes .btn-group-lg, .btn-group-md, .btn-group-sm and .btn-group-xs to button elements.

You can resize buttons using the above class with the already added class .btn-group to the div element.

Output







Nesting Bootstrap Button Groups

If you want to mix the Bootstrap dropdown menus with the button group, you can use nesting of the button groups.

Add the button and the list items inside the div element with the class .btn-group to create a dropdown button component. Now, nesting the component inside another div element with the same class .btn-group containing the series of buttons.

Output

The above example contains the series of buttons with the dropdown menu nested inside the button groups.

Vertical Bootstrap Button Groups

To create a vertical series of buttons, you have to wrap the button elements inside the div element with the class .btn-group-vertical.

You can also create a vertical group of buttons and nesting the dropdown button with it. See the example below for the vertical dropdown menu.

Output

Create Justified Bootstrap Button Groups

You can create a stretched and same size buttons in a single line using the class .btn-group-justified with the class .btn-group. However, you have to follow different rules for the anchor links and button types given below.

Justified Anchor links

For anchor links, you have to just include the class .btn-group-justified with the class .btn-group.

Output

Justified button type

To create a justified button using button type, you have to put all the buttons inside the <div> tag with class .btn-group-justified and .btn-group.

Now, one thing you should do differently is to wrap each button inside the div element with class .btn-group.

Output

Reference
Getbootstrap Doc

Leave a Reply

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