Bootstrap 4 | Button Groups

Last Updated : 28 Apr, 2022
Bootstrap offers classes which allow to group buttons along the same line, horizontally or vertically. The buttons to be grouped are nested inside a <div> element with the class .btn-group. Horizontally arranged button groups: The .btn-group class is used to create horizontally arranged button groups. Example: html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <div class="btn-group">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                JavaScript
            </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: html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <div class="btn-group-vertical">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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: html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                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-success">
                CSS
            </button>
            <button type="button" 
                class="btn btn-success">
                JavaScript
            </button>
        </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.
  1. Single button dropdown: Example: html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <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">
                <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 href="#">React</a></li>
                    <li><a href="#">Vue</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
    Output:
  2. Split button dropdown: Example: html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <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">
                <button type="button" 
                    class="btn btn-success">
                    JavaScript
                </button>
                <button type="button" 
                    class="btn btn-success dropdown-toggle" 
                    data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">React</a></li>
                    <li><a href="#">Vue</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
    Output: However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class. Example: html 
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button Groups</title>
    <meta charset="utf-8">
    <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <div class="btn-group-vertical">
            <button type="button" 
                class="btn btn-success">
                HTML
            </button>
            <button type="button" 
                class="btn btn-success">
                CSS
            </button>
            <div class="btn-group">
                <button type="button" 
                    class="btn btn-success dropdown-toggle" 
                    data-toggle="dropdown">
                    JavaScript
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">React</a></li>
                    <li><a href="#">Vue</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
    Output:

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
     
Comment
Article Tags:
Web Technologies
Bootstrap
Bootstrap-4

Explore