GridSystem Pada Bootstrap 4

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Apa itu Grid System pada Bootstrap 4?

Grid System adalah sistem pengaturan lebar untuk masing - masing komponen yang ingin kita buat di dalam halaman web menggunakan library framework Bootstrap 4. Pengaturan ini tujuannya adalah untuk mengatur responsivitas design halaman web yang sedang dibuat.

Dengan adanya Grid System maka pembuatan halaman web yang responsive menjadi semakin mudah karena para developer web tidak harus menuliskan coding CSS secara manual satu per satu agar design halaman web buatannya menjadi responsive.

Bagaimana Cara Kerja Grid System Bootstrap 4 ?

Di dalam bootstrap terdapat 12 Grid. Grid - grid ini dapat dibayangkan seperti kotak - kotak yang berjajar dari kiri ke kanan sebanyak 12 buah. Untuk selanjutnya, kotak - kotak ini akan kita sebut sebagai Kolom ( col ).

Ada beberapa jenis class dasar dari bootstrap 4 untuk mengendalikan grid, yaitu :

Jenis Class	Keterangan
.col-*	Untuk mengatur grid secara otomatis
.col-sm-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran kecil (>=576px)
.col-md-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran sedang (>=720px)
.col-lg-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran besar (>=922px)
.col-xl-*	Untuk mengatur grid pada ukuran layar monitor yang berukuran ekstra besar (>=1200px)

Keterangan :

• Class .col-* artinya bahwa grid yang diatur dengan grid system ini akan dapat responsive untuk sebarang ukuran layar.
• Tanda * juga dapat diganti dengan angka 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 atau 12.
• Sebelum dapat menggunakan class .col maka harus dipanggil dahulu class .row.
• Dalam 1 row total kolom maksimalnya adalah 12. Jadi, misalkan dalam 1 row akan dibagi menjadi 2 col sama lebar maka dipanggil .col-6 dan .col-6.

Contoh :

1. Jendela browser dibagi menjadi 12 kolom.

2. Jendela browser dibagi menjadi 2 kolom.

3. Jendela browser dibagi menjadi 3 kolom.

4. Jendela browser dibagi menjadi 4 kolom.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap 4 - Situs Referensi Belajar Bootstrap 4