Skip to content
Related Articles

Related Articles

Bootstrap 4 | Button Groups
  • Last Updated : 23 Oct, 2019

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:




<!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>

Output:

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



Example:




<!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>

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:




<!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>

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:




    <!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>

    Output:

  2. Split button dropdown:

    Example:




    <!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>

    Output:

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

    Example:




    <!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>

    Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :