Grup Tombol Bootstrap 4
Grup Tombol
Bootstrap 4 memungkinkan Anda untuk mengelompokkan serangkaian tombol bersama-sama (dalam satu baris) dalam grup tombol:
Gunakan <div>elemen dengan kelas .btn-groupuntuk membuat grup tombol:
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Tips: Daripada menerapkan ukuran tombol ke setiap tombol dalam grup, gunakan kelas .btn-group-lguntuk grup tombol besar atau .btn-group-smuntuk grup tombol kecil:
Tombol Besar:
Tombol Bawaan:
Tombol Kecil:
Contoh
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Grup Tombol Vertikal
Bootstrap 4 juga mendukung grup tombol vertikal:
Gunakan kelas .btn-group-verticaluntuk membuat grup tombol vertikal:
Contoh
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Grup Tombol Bersarang & Menu Dropdown
Grup tombol Nest untuk membuat menu tarik-turun (Anda akan mempelajari lebih lanjut tentang tarik-turun di bab selanjutnya):
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Dropdown Tombol Split
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Grup Tombol Vertikal dengan Dropdown
Contoh
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Grup Tombol Berdampingan
Grup tombol "sebaris" secara default, yang membuatnya muncul berdampingan saat Anda memiliki beberapa grup:
Contoh
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>