Cara Membuat Dropdown Checkbox dengan Bootstrap

Cara Membuat Dropdown Checkbox dengan Bootstrap - Tutorial dumetschool kali ini akan membahas satu kasus sederhana yang akan menggabungkan dua komponen bootstrap yakni button dropdown dan checkbox, nantinya akan chekcbox akan disisipkan kedalan button dropdown. Jika kalian ingin membuat dropdown checbox bisa kalian ikuti langkah - langkahnya berikut ini.

Baiklah seperti biasa kalian sipakan file bootstrapnya atau kalian bisa download dihalaman resminya bootstrap, kebetulan pada kasus ini saya gunakan bootstrap secara online.

Jika sudah kalian siapkan filenya, selanjutnya buat komponen button dropdown dan checkboxnya seperti berikut.

<body>
      <div class="dropdown m-5">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown Checkbox
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#"><input type="checkbox" name="checkbox" >&nbsp; Checkbox 1</a>
        <a class="dropdown-item" href="#"><input type="checkbox" name="checkbox" >&nbsp; Checkbox 2</a>
        <a class="dropdown-item" href="#"><input type="checkbox" name="checkbox" >&nbsp; Checkbox 3</a>
      </div>
    </div>
</body>

dengan memanfaatkan komponen tersebut tentunya ada kreasi yang bisa ditampilkan kedalam halaman website tentu dengan fungsi yang bisa disesuaikan. Jika sudah kalian ketikan sintak diatas, selanjutnya silahkan kalian simpan dan buka dibrowser masing - masing.

Baiklah cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Dropdown Checkbox dengan Bootstrap, semoga bermanfaat, tetap semangat belajar dan kunjungi artikel laninya di dumetschool.

21 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat