What are Button Groups in Bootstrap ?

Last Updated : 05 Jun, 2023

"Button Groups" in Bootstrap is a class of name "btn-group" which is used to create a series of buttons in groups (without spaces) vertically or horizontally.

Syntax: This is the basic syntax of the button group class where each button has its own class of "btn".

<div class="btn-group">     <button type="button" class="btn">Click</button> </div>

Buttons have a default border-radius on the first and last buttons of the group.

Adding Styles on Buttons: Bootstrap allows you to add styles to your buttons using the following classes:

.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link

Example: In this example, we will create button groups using Bootstrap.

HTML

<!DOCTYPE html> <html lang="en"> <head>     <title>Bootstrap Example</title>     <meta charset="utf-8">     <meta name="viewport"            content="width=device-width, initial-scale=1">     <link rel="stylesheet"            href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">     </script>     <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">     </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">     </script> </head>  <body>     <div class="btn-group">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div> </body> </html>

Output:

Sizing of your Buttons: Bootstrap provides 4 button sizes which you can add directly to your buttons by adding an additional class of "btn-group-*" to your "btn-group" class. No need to add separate classes to each button.

All 4 sizes can be used as follows:

Example: In this example, we will size our button.

HTML

<!DOCTYPE html> <html lang="en"> <head>     <title>Bootstrap Example</title>     <meta charset="utf-8">     <meta name="viewport" content=         "width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">     </script>     <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">     </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">     </script> </head>  <body>     <div class="btn-group btn-group-lg">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div>     <div class="btn-group">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div>     <div class="btn-group btn-group-sm">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div>     <div class="btn-group btn-group-xs">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div> </body> </html>

Output:

Vertical Button Groups: Bootstrap also supports vertical button groups stacked in a vertical manner rather than horizontally. Use the class "btn-group-vertical" to create a vertical button group:

Example: In this example, we will create vertical button groups.

HTML

<!DOCTYPE html> <html lang="en"> <head>     <title>Bootstrap Example</title>     <meta charset="utf-8">     <meta name="viewport" content=         "width=device-width, initial-scale=1">     <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">     <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">     </script>     <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">     </script>     <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">     </script> </head>  <body>     <div class="btn-group-vertical">         <button type="button" class="btn btn-danger">Click</button>         <button type="button" class="btn btn-warning">Click</button>         <button type="button" class="btn btn-success">Click</button>     </div> </body> </html>

Output:

Nesting of Buttons: Bootstrap allows you to create dropdown menus under your buttons through nesting. Add a class of "btn-group" within your main "btn-group" class to have a dropdown menu within your button:

Example: In this example, we will create a nested button.