Selamat datang kembali di seri tutorial Bootstrap! Kali ini, kita akan membahas salah satu fitur paling kuat dan mendasar dari Bootstrap: Grid System. Sistem grid adalah tulang punggung dari desain responsif di Bootstrap, memungkinkan Anda untuk mengatur layout halaman web menjadi struktur kolom dan baris yang fleksibel dan dapat beradaptasi dengan berbagai ukuran layar.

Memahami dan menguasai Grid System Bootstrap adalah kunci untuk membuat website yang terlihat baik dan berfungsi dengan baik di desktop, tablet, maupun smartphone.

Konsep Dasar Grid Bootstrap

Grid System Bootstrap didasarkan pada layout 12 kolom. Ini berarti lebar halaman dibagi menjadi 12 bagian yang sama, dan Anda dapat menggunakan kombinasi kolom ini untuk menyusun elemen-elemen di halaman Anda. Berikut adalah beberapa konsep penting:

1. Container: Ini adalah wrapper utama yang membungkus seluruh konten grid Anda. Bootstrap menyediakan dua jenis container:
   • .container: Memberikan lebar tetap yang responsif (akan berubah pada breakpoint tertentu).
   • .container-fluid: Memberikan lebar 100% di semua ukuran layar.
2. Row: Baris adalah wrapper horizontal untuk kolom. Anda harus menempatkan kolom (.col-*) di dalam baris (.row). Baris digunakan untuk membuat kelompok kolom secara horizontal.
3. Column: Ini adalah unit dasar dari grid. Anda menggunakan kelas .col-* untuk menentukan berapa banyak dari 12 kolom yang ingin Anda gunakan untuk sebuah elemen. Bootstrap menyediakan kelas kolom yang berbeda untuk berbagai ukuran layar, memungkinkan Anda membuat layout yang berbeda untuk desktop, tablet, dan mobile.

Breakpoints dalam Grid

Bootstrap menggunakan breakpoints untuk menentukan kapan layout akan berubah berdasarkan lebar layar. Breakpoint ini direpresentasikan oleh awalan kelas kolom:

• .col-: Ekstra kecil (biasanya untuk ponsel, lebar layar kurang dari 576px)
• .col-sm-: Kecil (biasanya untuk ponsel lanskap, lebar layar 576px ke atas)
• .col-md-: Menengah (biasanya untuk tablet, lebar layar 768px ke atas)
• .col-lg-: Besar (biasanya untuk desktop kecil hingga sedang, lebar layar 992px ke atas)
• .col-xl-: Ekstra besar (biasanya untuk desktop besar, lebar layar 1200px ke atas)
• .col-xxl-: Ekstra ekstra besar (biasanya untuk desktop sangat besar, lebar layar 1400px ke atas)

Anda dapat menggunakan kelas-kelas ini untuk menentukan berapa banyak kolom yang akan ditempati oleh sebuah elemen pada setiap ukuran layar.

Contoh Penggunaan Dasar

Mari kita lihat beberapa contoh sederhana.

Dua Kolom dengan Lebar yang Sama

Untuk membuat dua kolom dengan lebar yang sama, Anda bisa menggunakan .col-* tanpa angka (yang akan membagi ruang yang tersedia secara merata), atau secara eksplisit menentukan jumlah kolom yang sama.

Contoh:

Pada layar kecil dan seterusnya, kedua div akan menempati 6 kolom masing-masing (total 12 kolom dalam satu baris).

Kolom dengan Lebar Berbeda

Anda dapat menentukan lebar kolom yang berbeda dengan menggunakan angka setelah awalan .col-. Angka tersebut menunjukkan berapa banyak dari 12 kolom yang akan ditempati oleh elemen tersebut.

Contoh:

Pada layar medium dan seterusnya, kolom pertama akan menempati 8 kolom, dan kolom kedua akan menempati 4 kolom. Pada layar yang lebih kecil (di bawah 768px), kolom-kolom ini akan secara otomatis mengambil lebar 100% dan bertumpuk secara vertikal.

Menggunakan Kelas Responsif

Anda dapat menggabungkan kelas kolom untuk berbagai ukuran layar untuk membuat layout yang lebih kompleks dan responsif.

Contoh:

Dalam contoh ini:

• Pada layar ekstra kecil (kurang dari 576px), kedua kolom akan menempati 12 kolom (penuh).
• Pada layar kecil (576px ke atas), kedua kolom akan menempati 6 kolom masing-masing.
• Pada layar medium (768px ke atas), kolom pertama akan menempati 4 kolom dan kolom kedua akan menempati 8 kolom.

Offset dan Ordering

Bootstrap juga menyediakan kelas untuk mengontrol offset (memberikan margin kiri pada kolom) dan urutan kolom.

Offset

Kelas .offset-* -n digunakan untuk memberikan margin kiri pada kolom, di mana * adalah awalan breakpoint dan n adalah jumlah kolom yang ingin Anda offset.

Contoh:

Pada layar medium dan seterusnya, kolom pertama akan memiliki offset sebesar 4 kolom dari kiri.

Ordering

Kelas .order-* -n digunakan untuk mengubah urutan visual kolom. Nilai n bisa berupa angka dari 1 hingga 12 (atau first dan last).

Contoh:

Meskipun secara HTML kolom pertama muncul sebelum kolom kedua, kelas .order-md-2 dan .order-md-1 akan membalik urutan visualnya pada layar medium dan seterusnya.

Gutters

Gutters adalah jarak antara kolom dalam sebuah baris. Bootstrap menyediakan kelas .gx-*, .gy-*, dan .g-* pada elemen .row untuk mengontrol gutters secara horizontal, vertikal, atau keduanya. Nilai * bisa dari 0 hingga 5.

Contoh dengan Gutters:

Kelas .gx-3 akan menambahkan jarak horizontal di antara kolom-kolom dalam baris.

Nested Grids

Anda dapat menempatkan grid (container, row, dan columns) di dalam kolom lain untuk membuat layout yang lebih kompleks.

Contoh Nested Grid:

Kolom kedua (yang menempati 8 kolom pada layar medium ke atas) berisi grid lain dengan dua kolom di dalamnya.

Kesimpulan

Grid System Bootstrap adalah alat yang sangat ampuh untuk membangun layout web yang responsif dan terstruktur. Dengan memahami konsep container, row, column, breakpoints, offset, ordering, dan gutters, Anda dapat menciptakan berbagai macam layout yang fleksibel dan adaptif terhadap berbagai ukuran layar. Latihan dan eksperimen adalah kunci untuk menguasai sistem grid ini. Selamat mencoba dan terus eksplorasi kemungkinan layout yang bisa Anda buat dengan Bootstrap!