Bootstrap 4 | Button Groups

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:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        
    <script src
    </script
        
    <script src
    </script
        
    <script src
    </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>

chevron_right


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:


    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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
            
        <script src
        </script
            
        <script src
        </script
            
        <script src
        </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>

    chevron_right

    
    

    Output:

  2. Split button dropdown:

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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
            
        <script src
        </script
            
        <script src
        </script
            
        <script src
        </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>

    chevron_right

    
    

    Output:

    However, the split button dropdown does not work as expected when the buttons are nested under .btn-group-vertical class.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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
            
        <script src
        </script
            
        <script src
        </script
            
        <script src
        </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>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai



Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.