grid system bootstrap | java php laravel linux mysql sql bootstrap html css query java php laravel linux mysql sql bootstrap html css query: grid system bootstrap

java linux php mysql bootstrap sql sping boot linuxmint laravel



Jumat, 07 Oktober 2016

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 :
grid system bootstrap
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.

Tidak ada komentar:

Posting Komentar

saifiahmada.com adalah blog belajar programming Indonesia, membahas lengkap materi bahasa pemrograman: code HTML, CSS, Bootstrap, Desain, PHP, MySQL, coding Java, Query, SQL, dan dunia linux