A. Pengertian
       Grid System adalah struktur dua demensi yang terdiri dari sumbu horisontal dan sumbu vertikal sehingga akan tersusun kolom dan baris. Sistem Grid pada awalnya digunakan dalam dunia percetakan. Dalam dunia design web, sistem grid merupakan metode yang efektif untuk menghasilkan layout yang konsisteen menggunakan HTML dan CSS, sehingga dalam dunia design web sistem grid merupakan komponen yang paling penting, untuk membuat atau membangun sebuah website. 

B. Maksud dan Tujuan
      Tujuan mempelajari Bootstrap Grid System adalah agar kita bisa membuat responsive web dengan mahir dan memahami Grid Sytem pada Bootsrat.

 C. Pembahasan
  • Bootstrap Grid System
Sistem grid pada bootstrap memungkinkan kita membuat hingga 12 kolom di halaman.
    Jika kita tidak ingin menggunakan semua 12 kolom secara individual, kita dapat mengelompokkan kolom sama untuk menciptakan kolom yang lebih luas seperti contoh pada gambar dibawah ini :
  • Grid Classes
Sistem Grid pada Bootstrap memiliki empat Class :
  • xs ( untuk ukuran handphones ).
  • sm ( untuk ukuran Tablet ).
  • md ( untuk ukuran Desktop ).
  • lg ( untuk ukuran larger Desktop ).
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.

  • Basic Structure of a Bootstrap Grid
Berikut ini adalah struktur dasar dari grid Bootstrap :
<div class="row">  <div class="col-*-*"></div></div><div class="row">  <div class="col-*-*"></div>  <div class="col-*-*"></div>  <div class="col-*-*"></div></div>

    Pertama, buat berturut-turut (<div class="row">) . Kemudian, tambahkan jumlah yang diinginkan dari kolom dan beri class pada (tag div dengan tepat .col-*-*).Perhatikan bahwa angka-angka dalam .col - * - * harus selalu menambahkan hingga 12 untuk setiap baris.
contoh pengisian kelas yang benar :


F. Kesimpulan
      Dari pembahasan diatas dengan kita memahami sistem grid pada bootsrap kita bisa membuat halaman web yang kita buat menjadi responsiv.

G. Refrensi
  • w3schools/bootstrap/bootstrap_grid_basic.html
      Semoga bermanfaat, SMK Bisa !!!

Wassalamualaikum Wr. Wb

TAGS : |