Mengenal System Grid pada Bootstrap

Apa itu System Grid? System grid dalam sebuah desain web adalah sebuah cara atau metode pembagian kolom di sebuah halaman web dengan men...

Apa itu System Grid?

System grid dalam sebuah desain web adalah sebuah cara atau metode pembagian kolom di sebuah halaman web dengan menggunakan class. Pembagian kolom ini dimaksudkan agar web menjadi responsive.
Bootstrap memiliki 12 grid yang bila kita gambarkan menjadi kolom adalah sebagai berikut:

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 2

span 2

span 2

span 2

span 2

span 2

span 3

span 4

span 5

Bootstrap Grid Classes

Pengelompokan Class Grid dalam Bootstrap

Bootstrap menggunakan beberapa nama class untuk digunakan di perangkat / devices yang berbeda:

• col-xs-* (untuk smartphones)
• col-sm-* (untuk tablets)
• col-md-* (untuk desktops)
• col-lg-* (untuk desktops besar)

tanda asterik (*) menyatakan lebar kolom untuk di tampilkan di device yang bersangkutan.

Strukrur dasar system Grid Bootstrap

Untuk membuat system kolom / system grid pada bootstrap, dimulai dengan

sebagai berikut:

<div class="row">
  <div class="col-dd-*"></div>
</div>
<div class="row">
  <div class="col-dd-*"></div>
  <div class="col-dd-*"></div>
  <div class="col-dd-*"></div>
</div>
<div class="row">
  ...
</div>