Bootstrap 5 | Button group - GeeksforGeeks

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.<!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:
Example: This example uses show the working of horizontally arranged button group in Bootstrap 5.
<!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.<!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:
Example: This example uses show the working of vertical arranged button group in Bootstrap 5.
<!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.<!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:
Example: This example uses show the working of button sizes with button group in Bootstrap 5.
<!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:<!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:
Single button dropdown:Example:
<!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:<!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:
<!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:<!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>Output:
<!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>
Output:
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to Show Images on Click using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?