Bootstrap 4 | Button Groups - GeeksforGeeks

23 Jul, 2021
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.  
Single button dropdown:Example:  
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:  
Output:  
 Split button dropdown:Example:  
 
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:  
Output:  
However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class.Example:  
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:  
Output:  
Supported Browser:
Google Chrome
Internet Explorer
Firefox
Opera
Safari 
 
Akanksha_Rai
ysachin2314
Bootstrap-4
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to change navigation bar color in Bootstrap ?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to pass data into a bootstrap modal?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?