Home >>Bootstrap Tutorial >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:

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads