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.

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>

Output:

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

Bootstrap 5 Button group Mixed styles

Explore