Tutorial Belajar Botstrap Bagian 14 : Cara membuat Grup Tombol di Bootstrap

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 13 : Cara membuat Tombol di Bootstrap, selanjutnya kita akan belajar bagaimana cara membuat grup tombol di Bootstrap.

Bootstrap juga memungkinkan Anda untuk mengelompokkan serangkaian tombol menjadi satu baris melalui komponen grup tombol.

Untuk membuat grup tombol cukup bungkus serangkaian tombol dengan class .btn dalam elemen <div> dan terapkan class .btn-grup di atasnya, seperti yang ditunjukkan pada contoh berikut:

<div class="btn-group">
        <button type="button" class="btn btn-primary">Beranda</button>
        <button type="button" class="btn btn-primary">Tentang</button>
        <button type="button" class="btn btn-primary">Layanan</button>
    </div>

Membuat Tombol Toolbar

Anda juga dapat menggabungkan kumpulan grup tombol untuk membuat komponen yang lebih kompleks seperti tombol toolbar.

Untuk membuat tombol toolbar cukup bungkus set grup tombol dalam elemen <div> dan terapkan class .btn-toolbar di atasnya, seperti yang ditunjukkan pada contoh berikut:

    <div class="btn-group mr-2">
        <button type="button" class="btn btn-primary">
            <i class="fa fa-font"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fa fa-bold"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fa fa-italic"></i>
        </button>
    </div>
    <div class="btn-group mr-2">
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-left"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-center"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-right"></i>
        </button>
        <button type="button" class="btn btn-primary">
            <i class="fa fa-align-justify"></i>
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">
            <i class="fa fa-undo"></i>
        </button>
    </div>

Ukuran Tinggi Tombol Grup

Anda cukup menerapkan class ukuran grup tombol seperti .btn-group-lg atau .btn-group-sm langsung ke setiap elemen .btn-group untuk membuat grup tombol yang lebih besar atau lebih kecil , seperti yang ditunjukkan pada contoh di bawah ini:

<div class="btn-group mb-2 btn-group-lg">
        <button type="button" class="btn btn-primary">Beranda</button>
        <button type="button" class="btn btn-primary">Tentang</button>
        <button type="button" class="btn btn-primary">Layanan</button>
    </div>
    <br>
    <div class="btn-group mb-2">
        <button type="button" class="btn btn-primary">Beranda</button>
        <button type="button" class="btn btn-primary">Tentang</button>
        <button type="button" class="btn btn-primary">Layanan</button>
    </div>
    <br>
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary">Beranda</button>
        <button type="button" class="btn btn-primary">Tentang</button>
        <button type="button" class="btn btn-primary">Layanan</button>
    </div>

Grup Tombol Bersarang

Grup tombol juga bisa disarangkan. Contoh berikut menunjukkan cara menempatkan .btn-group dalam .btn-group lain untuk membuat menu tarik-turun di dalam grup tombol.

<div class="btn-group">
        <a href="#" class="btn btn-primary">Beranda</a>
        <a href="#" class="btn btn-primary">Tentang</a>
        <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Layanan</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Desain Web</a>
                <a class="dropdown-item" href="#">Pembuatan Web</a>
            </div>
        </div>
    </div>

Grup Tombol yang Ditumpuk Secara Vertikal

Anda juga dapat membuat grup tombol tampak bertumpuk secara vertikal daripada secara horizontal. Untuk melakukan ini, cukup ganti class .btn-group dengan .btn-group-vertical, seperti ini:

    <div class="btn-group-vertical">
        <a href="#" class="btn btn-primary">Beranda</a>
        <a href="#" class="btn btn-primary">Tentang</a>
        <div class="btn-group">
            <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Services</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Desain Web</a>
                <a class="dropdown-item" href="#">Pembuatan Web</a>
            </div>
        </div>
    </div>

Membuat Grup Tombol Justified

Anda juga dapat meregangkan grup tombol untuk mengisi semua lebar yang tersedia dengan menerapkan class utilitas flex .d-flex ke elemen .btn-group. Setiap tombol memiliki lebar yang sama dalam kasus ini.

<div class="btn-group d-flex">
        <button type="button" class="btn btn-primary">Beranda</button>
        <button type="button" class="btn btn-primary">Tentang</button>
        <button type="button" class="btn btn-primary">Layanan</button>
    </div>

Semoga tutorial ini bisa membantu Anda belajar cara membuat grup tombol di Bootstrap.