Cara Membuat Dropdown Checkbox dengan Bootstrap

21/04/2020    Risman Hakim    74     Website

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.

Web Design, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More