Tutorial Bootstrap Part 2 : Grid Di Bootstrap

Assalamu'alaikum W. W

Abdul Hafid Gunawan - Hai sobat setia SC Blog, kali ini kita akan membahas tentang penggunaan system grid yang ada di boostrap.

PENGERTIAN

SleepingCodings - Grid System merupakan suatu system yang membantu dalam layouting sebuah website, yang di mana Grid System ini support di semua resolusi layar yang ada.

PEMBAGIAN GRID CLASS

• .col- (extra small devices)= untuk resolusi layar sebesar 576px cocok untuk ukuran hp
  
• .col-sm- (small devices) = untuk resolusi layar sama dengan atau lebih besar dari 576px cocok untuk ukuran hp
  
• .col-md- (medium devices) = untuk resolusi layar sama dengan atau lebih besar dari 768px cocok untuk ukuran laptop
  
• .col-lg- (large devices) = untuk resolusi layar sama dengan atau lebih dari 992px  cocok untuk ukuran komputer
• .col-xl- (xlarge devices) = untuk resolusi layar sama dengan atau lebih dari 1200px cocok untuk ukuran komputer layar lebih dari 14 inch

contoh script :

dan hasilnya :

KESIMPULAN
Grid System ini di gunakan untuk seni layouting yang gunanya agar website bisa di akses menggunakan devices / perangkat beresolusi sebesar atau sekecil apapun.