Bootstrap 5 | Button group

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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
            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>                 

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
            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>

    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: This example uses show the working of button sizes with button group in Bootstrap 5.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
            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>

    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.

    Single button dropdown:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
            <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
            crossorigin="anonymous">
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
        </script>
        <script src=
            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>      

    chevron_right

    
    

    Output:

  • Split button dropdown:
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
            <!-- Load Bootstrap -->
        <link rel="stylesheet"
              href=
            integrity=
    "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
            crossorigin="anonymous">
      
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
        </script>
        <script src=
            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>

    chevron_right

    
    

    Output:

  • Bootstrap 5 also supports Split Button Vertical Dropdown.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Bootstrap 5 | Buttons group
        </title>
      
        <!-- Load Bootstrap -->
        <link rel="stylesheet" 
              href=
             integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
             crossorigin="anonymous">
        <script src=
            integrity=
    "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous">
         </script>
        <script src=
            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>

    chevron_right

    
    

    Output:




My Personal Notes arrow_drop_up

I love Open Source Culture have contributed to phpMyAdmin, LibreOffice, Ant-Design and Web is my passion

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.


Article Tags :

Be the First to upvote.


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