Cara Membuat Checkbox didalam Collapse Bootstrap

Cara Membuat Checkbox didalam Collapse Bootstrap - Bootstrap merupakan sebuah framework yang saat ini sangat populer sekali karena dengan framework ini kita telah diberikan kemudahan dalam membuat layout website dengan teknologinya yaitu dapat menyesuaikan pada device berbeda. Selain itu elemen - elemen yang terdapat pada bootstrap juga sangat menarik contohnya button, checkbox dan lain sebagainya yang mempunyai style bermacam - macam. Tentu dengan elemen - elemen itu kita juga bisa mengkombinasikan anatara elemen satu dengan elemen lain nya, seperti tutorial berikut yang akan saya bagikan yakni Cara Membuat Checkbox didalam Collapse Bootstrap yang menghasilkan kombinasi elemen yang lumayan menarik, karena dengan membuat kombinasi seperti ini kita bisa menyembuyikan elemen checkbox didalam elemen collapse. Langsung saja simak langkah - langkah nya berikut ini.

Cara Membuat Checkbox didalam Collapse Bootstrap sangatlah mudah, yang penting kita selalu baca dokumentasi dari bootstrap dan didalamnya telah dijelaskan penggunaan dengan sangat jelas. Namun buat kalian yang masih bingung saya akan praktekan caranya berikut ini.
Langkah pertama silahkan kalian persiapkan file bootstrapnya terlebih dahulu pada kasus ini saya menggunakan bootstrap versi 4.1, setelah itu buatlah strukturnya seperti berikut untuk membuat collapse dan menambahkan beberapa checkbox sebagai datanya.

<body>
    <div class="container">
        <div class="row mt-3">
            <div class="col-md-5">
                <p>
                  <a class="btn btn-info btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Click and Choose...
                  </a>
                </p>
                <div class="collapse" id="collapseExample">
                  <div class="card card-body border-info">
                    <div class="custom-control custom-checkbox my-1 mr-sm-2">
                        <input type="checkbox" class="custom-control-input" id="check-1">
                        <label class="custom-control-label" for="check-1">Checkbox 1</label>
                      </div>
                      <div class="custom-control custom-checkbox my-1 mr-sm-2">
                        <input type="checkbox" class="custom-control-input" id="check-2">
                        <label class="custom-control-label" for="check-2">Checkbox 2</label>
                      </div>
                      <div class="custom-control custom-checkbox my-1 mr-sm-2">
                        <input type="checkbox" class="custom-control-input" id="check-3">
                        <label class="custom-control-label" for="check-3">Checkbox 3</label>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</body>

Setelah membuat struktur dan layout seperti diatas, selanjutnya simpan filenya kembali kemudian kalian bisa buka browser masing - masing dan lihat hasilnya. Maka layoutnya akan terliaht seperti gambar berikut.

Cara Membuat Checkbox didalam Collapse Bootstrap

Bagaimana, cukup mudah bukan Cara Membuat Checkbox didalam Collapse Bootstrap ? baik cukup sekian tutorial kali ini semoga tutorial ini bisa bermanfaat dan membantu. Selamat mencoba :)

14 Agustus 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat