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