Tombol Group: Belajar Membuat Tombol di Bootstrap 4 (Lanjutan)

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

Group tombol

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>

Lihat kode di Github | Lihat Live Demo

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:

Ukuran Tombol

<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>

Lihat kode di Github | Lihat Live Demo


Tombol Group Vertical

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

 Tombol Group Vertical

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>

Lihat kode di Github | Lihat Live Demo

Menggabungkan Tombol Group dengan Dropdown Menu

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>

Lihat kode di Github | Lihat Live Demo

Tombol Dropdown Terpisah

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>

Lihat kode di Github | Lihat Live Demo

Tombol Group Vertical dengan Dropdown Menu

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>
Lihat kode di Github | Lihat Live Demo

Tombol Group Bersampingan

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

Tombol Group Bersampingan

<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>

Lihat kode di Github | Lihat Live Demo

0 Komentar