GRID DASAR
Assalmu'alaikum Wr. Wb
Hai sobat semua, terima kasih sudah mengunjungi blog saya ini.
Kesempatan sebelumnya kita sudah mengetahui apa itu Bootstrap, sekarang kita akan lanjut kemateri selanjutnya yaitu Grid Dasar pada Bootstrap.
Langsung saja yuk...
BOOTSTRAP GRID SISTEM
Sistem grid bootstrap memungkinkan hingga 12 kolom disebuah halaman.
Jika kita tidak ingin menggunakan semua 12 kolom secara individual, kita dapat mengelompokkan kolom sama kolom untuk menciptakan kolom yg lebih luas.
Contoh :
GRID KELAS
Sistem Bootstrap memiliki 4 kelas :
- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yg lebih besar)
Kelas-kelas diatas dapat dikombinasi untuk membuat layout yang lebih dinamis dan fleksibel.
STRUKTUR DASAR BOOTSTRAP GRID
Pertama : Buat berturut-turut <div class="row">, lalu tambahkan jumlah yang diinginkan dari kolom dengan tepat. Perhatikan bahwa angka-angka dlam .col-*-* jika dijumlahkan harus 12 untuk setiap baris.
TIGA KOLOM YANG SAMA
Contoh :
Hasilnya :
DUA KOLOM YANG TIDAK MERATA
Contoh :
Hasilnya :
Silakan dicoba sendiri sobat, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.
Dalam Grid dasar Bootstrap memungkinkan kita untuk menciptakan hingga 12 kolom untuk setiap baris dan Sistem Bootstrap memiliki 4 kelas :
- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yg lebih besar)
Referensi :
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Wassalamu'alaikum Wr. Wb