What are Button Groups in Bootstrap ?

“Button Groups” in Bootstrap is a class of name “btn-group” which is used to create a series of buttons in groups (without spaces) vertically or horizontally.

Syntax: This is the basic syntax of the button group class where each button has its own class of “btn”.

<div class="btn-group">
    <button type="button" class="btn">Click</button>
</div>

Buttons have a default border-radius on the first and last buttons of the group.

Adding Styles on Buttons: Bootstrap allows you to add styles to your buttons using the following classes:

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Example: In this example, we will create button groups using Bootstrap.

Output:

Sizing of your Buttons: Bootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of “btn-group-*” to your “btn-group” class. No need to add separate classes to each button.

All 4 sizes can be used as follows:

Example: In this example, we will size our button.

Output:

Vertical Button Groups: Bootstrap also supports vertical button groups stacked in a vertical manner rather than horizontally. Use the class “btn-group-vertical” to create a vertical button group:

Example: In this example, we will create vertical button groups.

Output:

Nesting of Buttons: Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of  “btn-group” within your main “btn-group” class to have a dropdown menu within your button:

Example: In this example, we will create a nested button.

Output: