grid system bootstrap

Belajar (Grid System) Bootstrap

Berikut ini adalah class-class untuk sistem grid pada bootstrap :

<div class="col-sm-1"></div> akan menghasilkan panjang 1 span

<div class="col-sm-2"></div> akan menghasilkan panjang 2 span

<div class="col-sm-3"></div> akan menghasilkan panjang 3 span

<div class="col-sm-4"></div> akan menghasilkan panjang 4 span

<div class="col-sm-5"></div> akan menghasilkan panjang 5 span

<div class="col-sm-6"></div> akan menghasilkan panjang 6 span

<div class="col-sm-7"></div> akan menghasilkan panjang 7 span

<div class="col-sm-8"></div> akan menghasilkan panjang 8 span

<div class="col-sm-9"></div> akan menghasilkan panjang 9 span

<div class="col-sm-10"></div> akan menghasilkan panjang 10 span

<div class="col-sm-11"></div> akan menghasilkan panjang 11 span

<div class="col-sm-12"></div> akan menghasilkan panjang 12 span

Untuk 1 row jumah maksimal adalah 12 span, misalnya kita menggunakan class col-sm-12 maka hasilnya adalah menghasilkan panjang maksimal,

Grid Class

xs : diguakan untuk device hp

sm : digunakan untuk device tablet

md : digunakan untuk desktop

lg : digunakan untuk desktop

jadi class : col-sm-1, jika sm nya kita ganti dengan md akan menjadi class : col-md-1

Contoh Coding System Grid pada Bootstrap

Coding/script di atas jika kita jalankan pada browser akan menghasilkan tampilan seperti ini :

Dari gambar di atas, bisa kita ketahui jumlah maksimal span untuk setiap row adalah 12,

Pada baris pertama gambar di atas, class yang digunakan adalah col-sm-4 sebanyak 3 buah sehingga menghasilkan jumlah 12 span, begitu juga untuk row-row selanjutnya.

Gimana mudah lagi kan :) , Semoga bisa kita ingat class-class yang kita gunakan dalam posting grid system pada bootstrap.