Bootstrap Grid System

Bootstrap Grid System

Assalamualaikum wr.wb 

Pagi kawan, pada hari ini saya akan sharing tentang Bootstrap Grid System

A. Pengertian

    System grid dalam sebuah halaman web adalah sebuah cara atau metode pembagian kolom di sebuah halaman web dengan menggunakan class. Pembagian ini dimaksudkan agar web menjadi responsive

Seperti yang telah dijelaskan di atas, grid system bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran tersebut adalah :

1. col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile.
2. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran tablet.
3. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor.
4. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.

dari grid diatas kita bisa mengkombinasikan agar kita bisa memperoleh layout web sesuai keinginan kita.

B. Latar belakang

     Latar belakang belajar tentang materi kali ini adalah agar kita bisa Membuat tampilan web dengan bootstrap berdasarkan system grid

C. Alat dan bahan

1. Laptop
2. Bootstrap
3. text editor

 D. Tujuan
      Untuk membuat system kolom atau sysem grid pada bootstrap

E. Struktur dasar system Grid Bootstrap

1. Dimulai dengan <div class="row"> 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> - See more at: https://www.humayraa.com/tutorial-bootstrap-2-mengenal-system-grid/#sthash.5E2V66HD.dpuf

 

dimulai dengan <div class="row"> sebagai berikut:

  

 

dd adalah device ( misal md untuk dekstop ) sedangkan * adalah lebar grid.
Contoh membuat 3 kolom yang serupa ( sama lebar ) digunakan kode sebagai berikut

Penggunaan device bisa dikombinasikan dalam 1 kolom. Contoh membuat 6 kolom serupa di desktop, tapi kalau di tablet hanya tampil menjadi 3 kolom. Kodenya sebagai berikut

F. Referensi

• https://www.humayraa.com/tutorial-bootstrap-2-mengenal-system-grid/
• http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Sekian share kali ini, selamat mencoba dan semoga bermanfaat, terimakasih.

Wassalamualaikum wr.wb