Bootstrap 5 Button group Mixed styles

Last Updated : 18 Nov, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Button group Mixed styles 
    </title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>Button group Mixed styles</h3> 
          
        <div class="btn-group" role="group"> 
            <button type="button" 
                class="btn btn-danger"> 
                Java 
            </button> 
              
            <button type="button" 
                class="btn btn-info"> 
                C++ 
            </button> 
              
            <button type="button" 
                class="btn btn-success"> 
                Python 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Button group Mixed styles 
    </title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous"> 
</head> 
  
<body class="container"> 
    <div> 
        <h1 class="success"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>Button group Mixed styles</h3> 
          
        <div class="btn-group" role="group"> 
            <button type="button" 
                class="btn btn-outline-primary"> 
                Java 
            </button> 
            <button type="button" 
                class="btn btn-outline-success"> 
                C++ 
            </button> 
            <button type="button" 
                class="btn btn-outline-danger"> 
                Python 
            </button> 
        </div> 
    </div> 
</body> 
  
</html>