Cara Menggunakan Grid pada Bootstrap

Kali ini aku akan mengajak teman-teman untuk mengetahui cara menggunakan grid pada bootstrap. Bagi teman-teman yang belum tahu apa itu bootstrap, teman-teman bisa belajar di tulisanku sebelumnya berjudul Belajar Cara Menggunakan Bootstrap untuk Mempercantik Web. Pada tulisan kali ini kita akan fokus pada sistem grid. Dengan sistem grid ini kita bisa membagi halaman website yang kita buat dengan lebih mudah. Bagaimana cara-nya. Mari kita coba pelajari bersama.

LIHAT DEMO

Cara menerapkan grid, hampir mirip dengan cara menggunakan table. Kita harus membuat baris dulu, kemudian menentukan kolom. Baris didefinisikan dengan <div class=”row”>. Sedangkan kolom, didefinisikan dengan <div class=”col-md-12″>. 12 adalah ukuran kolom maksimal. Jika kita punya 2 kolom maka ukuran masing-masing adalah 6. Seperti inilah kira-kira bentuk grid.

Grid pada Bootstrap - Cara Menggunakan Grid pada Bootstrap

Grid pada Bootstrap

Untuk contoh, aku akan langsung ke isi bagian body.

Perlu diketahui juga bahwa penggunaan grid standard tidak memberikan style untuk border dan background. Ini karena sebenarnya grid digunakan untuk membagi halaman. Oleh sebab itu, kita harus menambahkan style sendiri agar grid yang kita buat terlihat jelas. Tambahkan style seperti ini pada grid.

Setelah selesai, kita coba buka halaman yang telah kita buat. Demikian hasilnya

Hasil Grid

Hasil Grid

Grid untuk Tampilan Mobile – Cara Menggunakan Grid pada Bootstrap

Jika kita buka grid yang telah kita buat dengan perangkat mobile hasilnya adalah seperti gambar di bawah ini. Gambar tersebut menunjukkan bahwa grid tidak mempertahankan bentuknya. Hal ini karena kita menggunakan col-md. Jika kita ingin grid mempertahankan bentuknya pada perangkat mobile, kita harus menggunakan col-xs. Ada 4 macam col tergantung darai apa user membuka, yaitu: xs (mobile), sm (tablet), md (dekstop), lg (dekstop besar).

Grid dibuka dengan Mobile

Grid dibuka dengan Mobile

Kita akan mencoba nge-mix untuk kolom ukurang 6 ya. Jadinya:

Saat dibuka dengan perangkat mobile, maka hasilnya seperti ini:

Grid untuk Perangkat Mobile - Cara Menggunakan Grid pada Bootstrap

Grid untuk Perangkat Mobile

Bagaimana jika kita mencoba untuk berubah ukuran. Misalnya, dekstop 6-6, mobile 5-7, dan table 2-10. Apakah bisa seperti itu? Mari kita coba. Begini codenya.

Seperti inilah hasilnya:

Grid dibuka dengan perangkat Mobile - Cara Menggunakan Grid pada Bootstrap

Grid dibuka dengan perangkat Mobile

Grid dibuka dengan Tablet - Cara Menggunakan Grid pada Bootstrap

Grid dibuka dengan Tablet

Penutup – Cara Menggunakan Grid pada Bootstrap

Nah, kita sudah belajar tentang grid. Kesimpulan-nya dengan grid kita dapat mengorganisasikan konten web dengan lebih mudah. Apa lagi ditambah dengan kemampuan responsive.