#4 - Membuat sistem grid di bootstrap

       

•  Apa itu grid?

          Grid merupakan  struktur yang terdiri dari kumpulan garis horisontal atau gabungan garis vertikal dan horisontal yang digunakan untuk membuat serta mengatur tampilan dari suatu halaman website. Contohnya seperti gambar di bawah ini :

Dalam bootstrap, ukuran sistem grid dibagi menjadi 12 kolom dalam setiap satu halaman.

• Class grid

           Di dalam bootstrap sistem grid memiliki 5 class, antara lain :

.col-*  digunakan untuk perangkat dengan ukuran layar ekstra kecil hingga ukuran lebar layar kurang dari 576px.

.col-sm-*  digunakan untuk  perangkat dengan ukuran layar kecil hingga ukuran lebar layar lebih dari atau sama dengan 576px.

.col-md-*  digunakan untuk perangkat dengan ukuran layar medium hingga ukuran lebar layar lebih dari atau sama dengan 768px.

.col-lg-* digunakan untuk perangkat dengan ukuran  layar besar hingga ukuran lebar layar lebih dari atau sama dengan 992px.

.col-xl-*  digunakan untuk perangkat dengan ukuran layar ekstra besar hingga ukuran lebar layar lebih dari atau sama dengan 1200px.

 

• Struktur dasar grid

           Berikut adalah contoh pembuatan struktur grid :

                     

1. 1. <div class="row">
   2.   <div class="col-*"></div>
   3.   <div class="col-*"></div>
   4. </div>
   5. <div class="row">
   6.   <div class="col-sm-*"></div>
   7.   <div class="col-sm-*"></div>
   8. </div>
   9. <div class="row">
   10. <div class="col-md-*"></div>
   11.   <div class="col-md-*"></div>
   12. </div>
   13. <div class="row">
   14. <div class="col-lg-*"></div>
   15.   <div class="col-lg-*"></div>
   16. </div>
   17. <div class="row">
   18. <div class="col-xl-*"></div>
   19.   <div class="col-xl-*"></div>
   20. </div>

       Perhatikan kode diatas, pastikan kita selalu menuliskan sintak <div class="row"> setiap kali ingin membuat sebuah grid,  kemudian pada simbol (*) kita masukkan jumlah ukuran gridnya sesuai keinginan, namun dengan syarat sebanyak apapun tag <div class="col-*-*"> yang akan kita buat, ukuran setiap baris yang ada didalam tag tersebut harus memenuhi jumlah 12 kolom.