Membuat Col Dinamis Bootstrap Menggunakan jQuery

Hallo teman-teman dumet school, pada kesempatan kali ini saya akan membahas tentang cara Membuat Col Dinamis Bootstrap Menggunakan Jquery. Dimana grid pada bootstrap ada 12 grid dan sistem grid Bootstrap menggunakan serangkaian wadah, baris, dan kolom untuk tata letak dan menyelaraskan konten. Pada pembahasan ini saya akan membuat kolom atau kelas col bootstrap menjadi dinamis ketika kita melakukan klik pada tombol.

Langkah pertama untuk Membuat Col Dinamis Bootstrap Menggunakan Jquery yaitu teman-teman buat struktur html seperti pada script di bawah ini.


<!DOCTYPE html>
<html>
<head>
 <title>Membuat Col Dinamis Bootstrap Menggunakan Jquery</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row text-center">
            <h4>Membuat Col Dinamis Bootstrap Menggunakan Jquery</h4>
            <button class="btn btn-sm btn-primary ml-2" id="list"><i class="fa fa-bars"></i></button>
        </div>
        <div class="row rowitem">
        </div>
    </div>
</body>
</html>

Jika sudah maka di file yang sama saya akan membuat satu function tampilan div class col dengan parameter untuk mengubah col bootstrapnya seperti berikut.

function show(col){
                $(".rowitem div").remove();
                for(var i=0; i<10; i++){
                    $(".rowitem").append(`<div class="col-${col} p-2">
                                        <div class="card">
                                          <div class="card-body">
                                            <h5 class="card-title">Card title ${i+1}</h5>
                                            <p class="card-text">Some quick example text to build on the card title</p>
                                            <a href="#" class="btn btn-success">Go</a>
                                          </div>
                                        </div>
                                    </div>`);
                }
            }
            show("6");

Nah untuk function di atas saja buat default dari col nya 6 sehingga akan menampilkan dua kolom dalam satu baris. Selanjutnya kita buat fungsi event klik untuk mengubah col nya seperti berikut ini.

$("button").click(function(){
                var mode = $(this).attr("id");
                if(mode=="list"){
                    show("12");
                    $(this).attr("id","col");
                    $(this).html(`<i class="fa fa-th"></i>`);
                }else{
                    show("6");
                    $(this).attr("id","list");
                    $(this).html(`<i class="fa fa-bars"></i>`);                
                }
            })

Dan jika di tampilkan di halaman browser maka akan seperti pada gambar di bawah ini.

Membuat Col Dinamis Bootstrap Menggunakan jQuery

Membuat Col Dinamis Bootstrap Menggunakan jQuery

Demikian artikel tentang cara Membuat Col Dinamis Bootstrap Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

27 Agustus 2019

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