Related Articles

Related Articles

Bootstrap 5 | Button group
  • Last Updated : 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.

    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
Recommended Articles
Page :