Pada Bootstrap 4, kita dapat membuat Group tombol secara bersamaan (Dalam satu baris). Berikut adalah contohnya:

Untuk membuatnya, kita bisa menggunakan elemen <div> dengan class .btn-group:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <button type="button" class="btn btn-primary">Tombol 3</button>
</div>

Tips: Untuk mengaturan ukuran tombol pada Group, kita bisa menggunakan class .btn-group-lg untuk tombol berukuran besar atau class .btn-group-sm untuk tombol berukuran kecil:

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <button type="button" class="btn btn-primary">Tombol 3</button>
</div>

Tombol Group Vertical

Kita juga dapat mengatur perataan tombol menjadi Vertical, berikut adalah contohnya:

Untuk membuatnya, kita dapat menggunakan class .btn-group-vertical:

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <button type="button" class="btn btn-primary">Tombol 3</button>
</div>

Menggabungkan Tombol Group dengan Dropdown Menu

Kita juga dapat menggabungkan Tombol Group dengan Dropdown Menu (Kita akan mempelajari Dropdown Menu pada bagian yang akan datang). Berikut adalah contohnya:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Tombol 3
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tombol 3.1</a>
      <a class="dropdown-item" href="#">Tombol 3.2</a>
    </div>
  </div>
</div>

Tombol Dropdown Terpisah

<div class="btn-group">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>

  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tombol 1.1</a>
    <a class="dropdown-item" href="#">Tombol 1.2</a>
  </div>
</div>

Tombol Group Vertical dengan Dropdown Menu

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Tombol 3
    </button>

    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tombol 3.1</a>
      <a class="dropdown-item" href="#">Tombol 3.2</a>
    </div>
  </div>
</div>

Tombol Group Bersampingan

Secara Default, Tombol Group Display nya adalah Inline yang mana dapat terlihat bersampingan jika kita membuat beberapa Group, berikut adalah contohnya:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Tombol 1</button>
  <button type="button" class="btn btn-primary">Tombol 2</button>
  <button type="button" class="btn btn-primary">Tombol 3</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Tombol 4</button>
  <button type="button" class="btn btn-primary">Tombol 5</button>
  <button type="button" class="btn btn-primary">Tombol 6</button>
</div>