Home >>Bootstrap Tutorial >Bootstrap Button Group

Bootstrap Button Group

Bootstrap Button Group

Bootstrap provide different types of classes which allows you to group a series of buttons together along the single line in a button group. You can create the groups of button horizontally and vertically.

For creating button groups, use a <div> element with a class .btn-group.

Let's take an example of button groups:

  <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Button groups</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-danger">.btn-group</button>
  <button type="button" class="btn btn-danger">.btn-group</button>
  <button type="button" class="btn btn-danger">.btn-group</button>
</div>
</body>
</html>
Output:

Vertical Button Group with dropdown

You can use class .btn-group-vertical in parent div to create vertical buttons.

Let's take an example of vertical button groups:

  <!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Button groups</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-success">.btn-group</button>
  <button type="button" class="btn btn-success">.btn-group</button>
  <button type="button" class="btn btn-success">.btn-group</button>
     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
       Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">1</a>
      <a class="dropdown-item" href="#">2</a>
    </div>
</div>
</body>
</html>
Output:

Sizing

By default the size of the button are same. To increase the size of button use the class .btn-group-*( -lg,- sm,- col, -md) instead of using individual classes in the button.

Let's take an Example of sizing button groups:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Button groups</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h5>Small Buttons:</h5>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-success">A</button>
    <button type="button" class="btn btn-success">B</button>
    <button type="button" class="btn btn-success">C</button>
  </div>
  <h5>Default Buttons:</h5>
  <div class="btn-group">
    <button type="button" class="btn btn-success">A</button>
    <button type="button" class="btn btn-success">B</button>
    <button type="button" class="btn btn-success">C</button>
  </div>
  <h5>Large Buttons:</h5>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-success">A</button>
    <button type="button" class="btn btn-success">B</button>
    <button type="button" class="btn btn-success">C</button>
  </div>
</div>
</body>
</html>
Output:
Small Buttons:
Default Buttons:
Large Buttons:

Side By Side Button Groups

You can also align the button groups side by side by using the class .btn-group. By default button groups are inline.

Let's take an example of side by side button groups:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Button groups</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
  <button type="button" class="btn btn-success">A</button>
  <button type="button" class="btn btn-success">B</button>
  <button type="button" class="btn btn-success">C</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>
  <button type="button" class="btn btn-primary">3</button>
</div>
</body>
</html>
Output:

Nesting

Bootstrap provides you to nested button. Nesting means you can create button within another button groups.

Let's take an example of nesting buttons:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Button groups</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
  <button type="button" class="btn btn-primary">A</button>
  <button type="button" class="btn btn-primary">B</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">C1</a>
      <a class="dropdown-item" href="#">C2</a>
    </div>
  </div>
</div>
</body>
</html>
Output:

Popular Tutorials