Grup Tombol Bootstrap 5

Grup tombol

Bootstrap 5 memungkinkan Anda menggabungkan sekumpulan tombol dalam grup tombol (dalam baris satu):

Gunakan yang memiliki .btn-group kelas <div> element untuk membuat grup tombol:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Try It Yourself

Petunjuk:Jangan aplikasikan ukuran tombol ke semua tombol di dalam grup, melainkan gunakan kelas .btn-group-lg Untuk grup tombol besar atau untuk .btn-group-sm Untuk grup tombol kecil:

Example

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Try It Yourself

Vertical Button Groups

Bootstrap 5 also supports vertical button groups:

Please use the class .btn-group-vertical Create a vertical button group:

Example

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

Try It Yourself

Side-by-Side Button Groups

By default, button groups are "inline", and multiple button groups are displayed side by side when there are multiple button groups:

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Geely</button>
  <button type="button" class="btn btn-primary">Great Wall</button>
  <button type="button" class="btn btn-primary">Hongqi</button>
</div>

Try It Yourself

Nested Button Groups and Dropdown Menus

Nested button groups can create dropdown menus (you will learn more about dropdown menus in the following chapters):

Example

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Phone</a>
      <a class="dropdown-item" href="#">Tablet</a>
    </div>
  </div>
</div>

Try It Yourself