Dalam artikel ini, kita akan membahas lebih lanjut tentang penggunaan Grid pada Bootstrap beserta contoh penerapannya.

Pengertian Grid pada Bootstrap

Grid System pada Bootstrap adalah sistem tata letak yang terdiri dari kolom dan baris. Kolom dan baris digunakan untuk membagi halaman web menjadi bagian-bagian yang dapat diatur secara independen. Dengan menggunakan Grid System, pengembang dapat mengatur tata letak halaman web dengan mudah tanpa harus menghitung piksel atau persentase secara manual. Grid System pada Bootstrap juga dirancang untuk menghasilkan tampilan yang responsif, artinya tampilan halaman web akan menyesuaikan ukuran layar perangkat pengguna, mulai dari layar smartphone hingga layar desktop.

Penerapan Grid pada Bootstrap

Grid System pada Bootstrap terdiri dari 12 kolom dengan lebar yang sama. Pengembang dapat membagi kolom-kolom tersebut untuk mengatur tata letak halaman web. Setiap kolom pada Bootstrap memiliki kelas dengan nama "col-" diikuti dengan angka dari 1 hingga 12, sesuai dengan jumlah kolom yang ingin digunakan. Misalnya, jika kita ingin menggunakan 6 kolom, kita dapat menambahkan kelas "col-6" pada elemen yang ingin kita bagi menjadi 6 kolom.

Contoh penerapan Grid pada Bootstrap:

Pada contoh di atas, kita menggunakan kelas "container" untuk menempatkan elemen-elemen yang akan kita tata letakkan menggunakan Grid System pada Bootstrap. Selanjutnya, kita menambahkan kelas "row" untuk membuat baris yang akan kita bagi menjadi kolom-kolom. Kemudian, kita menambahkan kelas "col-md-4" pada setiap kolom untuk membagi setiap baris menjadi 3 kolom dengan lebar yang sama. Kita juga menambahkan warna latar belakang pada setiap kolom untuk memudahkan pengenalan.

Pada contoh di atas, kita menggunakan kelas "col-md-4". "md" pada kelas tersebut menunjukkan bahwa kolom tersebut akan berubah menjadi 3