Site Loader
  Chat

Membuat Grid System pada Bootstrap –  Salah satu komponen penting pada bootstrap yaitu grid system(sistem grid). Grid system merupakan tampilan mengenai ukuran tiap kolom yang ingin digunakan, dengan menggunakan Grid system bootstrap maka halaman website yang kita bangun dapat disesuaikan mengenai tata ukuran. Pengaturan Grid system terdiri atas panjang dan lebar.

Grid sistem mempunyai batas maksimal 12, ibaratkan halaman web secara keseluruhan dengan ukuran 12. Dengan menggunakan grid system maka halaman website akan lebih terstruktur tampilan dan juga mendukung responsive design. Definisi terhadap penggunaan grid system menggunakan class css yang sudah diidentifikasikan oleh CSS Bootstrap bawaan, jadi anda tidak perlu mengatur kembali.

Penggunaan grid sistem dulunya hanya menggunakan dalam bentuk tabel HTML, namun untuk website yang profesional kurang mendukung terhadap SEO Friendly. Maka dari itu terdapat CSS untuk mengatur tata letaknya.

Macam-macam Grid System pada class bootstrap

Berikut ini macam-macam class pada sistem grid bootsrap
  1. Class .col-xs (extra small), dapat digunakan untuk perangkat kecil,dengan ukuran kurang dari 768 px. Contohnya smartphone.
  2. Class .col-sm(Small/kecil), dapat digunakan untuk perangkat yang hampir kecil, dengan ukuran lebih dari atau sama dengan  576 px. Contohnya tablet.
  3. Class .col.-md(Medium/menengah), dapat digunakan untuk perangkat sedang, dengan ukuran lebih dari atau sama dengan 768 px. Contohnya Laptop.
  4. Class .lg(Large/Besar), dapat digunakan untuk ukuran besar, dengan ukuran , lebih besar atau sama dengan 992 px. Contohnya Komputer dengan ukuran besar.
Jadi ukuran nya memiliki 4 macam, maka dari itu gunakanlah semua macam ukuran, karena telah kita tahu bahwa seseorang untuk mengakses halaman web bukan hanya menggunakan satu macam platform melainkan berbagai macam platform. Macam-macam grid di atas dapat dikombinasikan dengan class lainnya pada bootstrap.

Cara menggunakan Grid System Bootstrap

Di bawah ini contoh menggunakan grid system bootstrap dengan macam grid medium(.sm). Silahkan buat file baru dan masukan kode berikut ini :

Kode program di atas terdiri atas penggunaan class .row dan .col-md. Row digunakan untuk membuat tampilan lebih rapi, sedangkan co-md digunakan untuk mengatur ukuran lebar. Grid system Bootstrap juga dapat dimodifikasi mengenai pewarnaan maupun tingginya. Pada kode program diatas saya modifikasi dengan menambahkan pewarnaan latar belakang grid system bootstrap.

Post Author: Didik Prabowo

Seoarang Software enginering, Instruktur terutama di bifang pemrograman berbasis website, sekaligus admin di situs didikprabowo.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

PRODUK UNGGULAN

Anda tertarik ?

Subscribe to Blog via Email

Dapat kan informasi terbaru dengan memasukan email di kolom ini