Bootstrap 4 – Button Groups

Bootstrap cung cấp các class để nhóm các button lại với nhau.

Horizontal Button Group

Dùng class btn-group để nhóm các button lại theo chiều ngang.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Thailand</button>
      <button type="button" class="btn btn-primary">Cambodia</button>
      <button type="button" class="btn btn-primary">Vietnam</button>
    </div>
  </div>

</body>

</html>

Vertical Button Group

Thay class btn-group bằng btn-group-vertical để group các button theo chiều dọc.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-group-vertical" role="group">
      <button type="button" class="btn btn-primary">Thailand</button>
      <button type="button" class="btn btn-primary">Cambodia</button>
      <button type="button" class="btn btn-primary">Vietnam</button>
    </div>
  </div>

</body>

</html>

Button Group Size

Bootstrap cho phép bạn tạo Button Group với kích thước khác nhau mà không cần phải thay đổi mỗi button riêng lẻ.

Thêm các class .btn-group-sm hay .btn-group-lg vào .button-group để thay đổi kích thước button.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-group btn-group-sm" role="group">
      <button type="button" class="btn btn-primary">Small</button>
      <button type="button" class="btn btn-primary">Small</button>
      <button type="button" class="btn btn-primary">Small</button>
    </div>

    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Default size</button>
      <button type="button" class="btn btn-primary">Default size</button>
      <button type="button" class="btn btn-primary">Default size</button>
    </div>

    <div class="btn-group btn-group-lg" role="group">
      <button type="button" class="btn btn-primary">Large</button>
      <button type="button" class="btn btn-primary">Large</button>
      <button type="button" class="btn btn-primary">Large</button>
    </div>

    <style scoped>
      div {
        margin: 10px;
      }
    </style>
  </div>

</body>

</html>

Button Toolbar

Bạn có thể nhóm button groups thành một tập hợp Button Toolbar như một thanh công cụ.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-toolbar" role="toolbar">

      <div class="btn-group mr-2" role="group">
        <button type="button" class="btn btn-primary">Group 1</button>
        <button type="button" class="btn btn-primary">Group 1</button>
        <button type="button" class="btn btn-primary">Group 1</button>
      </div>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Group 2</button>
        <button type="button" class="btn btn-primary">Group 2</button>
      </div>

    </div>
  </div>

</body>

</html>

Kết hợp Dropdowns với Button Groups

Bạn có thể kết hợp Dropdowns với Button Groups

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-group" role="group">
      <button type="button" class="btn btn-primary">Buy</button>
      <button type="button" class="btn btn-primary">Sell</button>

      <div class="btn-group" role="group">
        <button class="btn btn-primary dropdown-toggle" type="button" id="about-us" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          About Us
        </button>
        <div class="dropdown-menu" aria-labelledby="about-us">
          <a class="dropdown-item" href="#">Our Story</a>
          <a class="dropdown-item" href="#">Our Team</a>
          <a class="dropdown-item" href="#">Contact Us</a>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Split Dropdowns

Dùng button groups để tạo split dropdown menu.

<!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.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <div class="btn-group">
      <button type="button" class="btn btn-success">About Us</button>
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Our Story</a>
        <a class="dropdown-item" href="#">Our Team</a>
        <a class="dropdown-item" href="#">Contact Us</a>
      </div>
    </div>
  </div>

</body>

</html>