Bootstrap 4 - Button Group

Previous
Quiz
Next

Description

Button groups allow multiple buttons to be stacked together on a single line.

Basic Button Group

You can create the basic button group by using .btn-group class inside <div> element as shown in the below example −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Group</h2>
         <div class = "btn-group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="/?originalUrl=https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Button Toolbar

You can group sets of button group into a single toolbar by using .btn-toolbar class as shown in the example below −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Toolbar</h2>
         <div class = "btn-toolbar" role = "toolbar" aria-label = "Toolbar with button groups">
            <div class = "btn-group mr-2" role = "group" aria-label = "First group">
               <button type = "button" class =" btn btn-info">Cricket</button>
               <button type = "button" class = "btn btn-info">Football</button>
               <button type = "button" class = "btn btn-info">Hockey</button>
               <button type = "button" class = "btn btn-info">Tennis</button>
            </div>
            
            <div class = "btn-group mr-2" role = "group" aria-label = "Second group">
               <button type = "button" class = "btn btn-info">Basketball</button>
               <button type = "button" class = "btn btn-info">Volleyball</button>
               <button type = "button" class = "btn btn-info">Boxing</button>
            </div>
            
            <div class = "btn-group mr-2" role = "group" aria-label = "Third group">
               <button type = "button" class = "btn btn-info">Archery</button>
               <button type = "button" class = "btn btn-info">Badminton</button>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="/?originalUrl=https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Button Group Sizes

You can control size of the button group by adding .btn-group-sm or .btn-group-lg class to the .button-group class as shown in the below example −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Button Group Sizes</h2>
         <div class = "btn-group btn-group-lg" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>
         
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
         <br>
         <br>
         
         <div class = "btn-group btn-group-sm" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="/?originalUrl=https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Vertical Button Group

You can display the button group vertically by using the class .btn-group-vertical as shown in the example below −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Vertical Button Group</h2>
         <div class = "btn-group-vertical" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="/?originalUrl=https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Nesting Button Group

You can place a .btn-group inside another .btn-group, when you want to display dropdown menu within a series of buttons.

The following example demonstrates nesting of button groups −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fcss%2Fbootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Nesting Button Group</h2>
         <div class = "btn-group" role = "group">
            <button type = "button" class = "btn btn-info">Cricket</button>
            <button type = "button" class = "btn btn-info">Football</button>
            <button type = "button" class = "btn btn-info">Hockey</button>
            <div class = "btn-group" role = "group">
               <button id = "nestingbtngroup" type = "button" class = "btn btn-info 
                  dropdown-toggle" data-toggle = "dropdown" aria-haspopup = "true" 
                  aria-expanded = "false">
                  
                  Sports
               </button>
               
               <div class = "dropdown-menu" aria-labelledby = "nestingbtngroup">
                  <a class = "dropdown-item" href = "#">Cricket</a>
                  <a class = "dropdown-item" href = "#">Football</a>
                  <a class = "dropdown-item" href = "#">Hockey</a>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="/?originalUrl=https%3A%2F%2Fcode.jquery.com%2Fjquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpopper.js%2F1.14.3%2Fumd%2Fpopper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src="/?originalUrl=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.1.3%2Fjs%2Fbootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

bootstrap4_components.htm
Print Page
Previous
Next
Advertisements