Bootstrap 5 Button group Mixed styles

Bootstrap 5 Button group is a component that helps to combine the buttons in a series in a single line. In button group mixed styles, we can create a button group with different background colors.

Button group Mixed styles used Classes:

• .btn-group: This class is used to group a series of buttons together on a single line.
• .btn: This class is used to create a button.
• .btn-{color_utility}: This class is used to set the color of the button.

Syntax:

<div class="btn-group" role="group" aria-label="...">
 <button type="button" class="btn btn-*">
 Content
 </button> 
 ...
</div>

Note: * can be substituted with color utility classes.

Example 1: In this example, we will create 3 buttons with mixed styles.

Output:

👁 Image

Example 2: In this example, we will see mixed styled outlined buttons.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/button-group/#mixed-styles