Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are Button Groups in Bootstrap ?

  • Difficulty Level : Easy
  • Last Updated : 29 Sep, 2021

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

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:

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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:

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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 horizontal. Use the class “btn-group-vertical” to create a vertical button group:

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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:

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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>
        <div class="btn-group">
            <button type="button" class="btn btn-success 
                dropdown-toggle" data-bs-toggle="dropdown"
                aria-expanded="false">Dropdown 
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Item 1</a></li>
                <li><a class="dropdown-item" href="#">Item 2</a></li>
            </ul>
        </div>
    </div>
</body>
  
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!