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

Article Tags :

Bootstrap

Technical Scripter

Web Technologies

Technical Scripter 2022