Bootstrap 5 | Button group

Last Updated : 29 Jul, 2020

Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Button group is a component provided by Bootstrap 5 which helps to combine the buttons in a series in a single line. All types of buttons are supported by it.

Syntax:

<div class="btn-group"> Buttons... <div>

Types: Following are the nine types of buttons available in Bootstrap 5:

btn-primary
btn-secondary
btn-success
btn-danger
btn-warning

btn-info
btn-light
btn-dark
btn-link

Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups.

Example: This example uses show the working of horizontally arranged button group in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

    <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
         crossorigin="anonymous">

</head>

<body>
    <div style="text-align: center;
           width: 600px; margin-top:100px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
    <div style="width: 600px;height: 200px;
         margin:20px;text-align: center;">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">
                          Primary</button>
            <button type="button" class="btn btn-secondary">
                          Secondary</button>
            <button type="button" class="btn btn-success">
                          Success</button>
            <button type="button" class="btn btn-danger">
                          Danger</button>
        </div>
        <div class="btn-group" style="margin-top: 10px;">
            <button type="button" class="btn btn-warning">
                     Warning</button>
            <button type="button" class="btn btn-info">
                     Info</button>
            <button type="button" class="btn btn-light">
                    Light</button>
            <button type="button" class="btn btn-dark">
                    Dark</button>
            <button type="button" class="btn btn-link">
                    Link</button>
        </div>
    </div>
</body>

</html>

Output:

Vertically arranged button groups: The .btn-group-vertical class is used in parent div to create vertical button group.

Example: This example uses show the working of vertical arranged button group in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

    <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
</head>

<body style="text-align:center;">
    <div class="container mt-3">

        <h1 style="color:green;">
            GeeksforGeeks
        </h1>

        <div class="btn-group-vertical">
            <button type="button" 
                    class="btn btn-success">
                HTML
            </button>

            <button type="button" 
                    class="btn btn-primary">
                CSS
            </button>

            <button type="button" 
                    class="btn btn-danger">
                JavaScript
            </button>
        </div>
    </div>
</body>

</html>

Output:

Button group sizing: The whole button group can be given the same size by including the class btn-group-* (* could be sm, md or lg) in the .btn-group parent element, instead of including sizing classes in each button.

Example: This example uses show the working of button sizes with button group in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

    <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
        crossorigin="anonymous">

</head>

<body style="text-align:center;">
    <div class="container mt-3">

        <h1 style="color:green;">
            GeeksforGeeks
        </h1>

        <div class="container">
            <div class="btn-group btn-group-lg">
                <button type="button" 
                        class="btn btn-success">
                    HTML
                </button>

                <button type="button" class="btn btn-dark">
                    CSS
                </button>

                <button type="button"
                        class="btn btn-secondary">
                    JavaScript
                </button>
            </div>

            <br><br>

            <div class="btn-group btn-group-md">
                <button type="button" 
                        class="btn btn-success">
                    HTML
                </button>

                <button type="button" 
                        class="btn btn-dark">
                    CSS
                </button>

                <button type="button" 
                        class="btn btn-secondary">
                    JavaScript
                </button>
            </div>

            <br><br>

            <div class="btn-group btn-group-sm">
                <button type="button" 
                        class="btn btn-success">
                    HTML
                </button>

                <button type="button" 
                        class="btn btn-dark">
                    CSS
                </button>

                <button type="button" 
                        class="btn btn-secondary">
                    JavaScript
                </button>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Nesting button groups and making dropdown menus: A button group can be nested within another button group and dropdown menus can be created this way.

Single button dropdown: Example: HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

        <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
  </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">

        <h1 style="color:green;">
            GeeksforGeeks
        </h1>

        <div class="container">
            <div class="btn-group">
                <button type="button" 
                        class="btn btn-success">
                    HTML
                </button>

                <button type="button"
                        class="btn btn-success btn-group">
                    CSS
                </button>

                <div class="btn-group">
                    <div class="dropdown">
                        <button type="button" 
class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                            JavaScript<span class="caret"></span>
                     </button>

                     <ul class="dropdown-menu" role="menu">
                       <li><a class="dropdown-item" href="#">React</a></li>
                       <li><a class="dropdown-item" href="#">Vue</a></li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Split button dropdown: Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

        <!-- Load Bootstrap -->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
        integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
        crossorigin="anonymous">

    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
   </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">

        <h1 style="color:green;">
            GeeksforGeeks
        </h1>

        <div class="container">
            <div class="btn-group">
                <button type="button"
                        class="btn btn-success">
                    HTML
                </button>

                <button type="button"
                        class="btn btn-primary btn-group">
                    CSS
                </button>

                <div class="btn-group">
                    <button type="button" 
                            class="btn btn-secondary">
                        JavaScript
                    </button>
                    <button type="button" 
                       class="btn btn-dark dropdown-toggle"
                       data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu">
                        <li>
                          <a class="dropdown-item" href="#">
                                React</a></li>
                        <li><a class="dropdown-item" href="#">
                            Vue</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Bootstrap 5 also supports Split Button Vertical Dropdown. Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons group
    </title>

    <!-- Load Bootstrap -->
    <link rel="stylesheet" 
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
         integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
         crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
     </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
        integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
        crossorigin="anonymous">
    </script>
</head>

<body style="text-align:center;">
    <div class="container mt-3">

        <h1 style="color:green;">
            GeeksforGeeks
        </h1>

        <div class="container">
            <div class="btn-group-vertical">
              <button type="button" class="btn btn-info">
                    HTML
              </button>

                <button type="button" 
                       class="btn btn-danger">
                    CSS
                </button>

                <div class="btn-group">
                    <button type="button" 
class="btn btn-secondary dropdown-toggle" 
                        data-toggle="dropdown">
                        JavaScript
                    </button>

                    <ul class="dropdown-menu" role="menu">
                        <li><a class="dropdown-item" href="#">
                                React</a></li>
                        <li><a class="dropdown-item" href="#">
                                Vue</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

</html>