GRID PADA BOOTSTRAP - Stacked-to-horizontal

Bootstrap | Grid Pada Bootstrap - Stacked-to-horizontal | Budayakan Berbagi

CONTOH PENGGUNAAN SISTEM GRID

Setelah kita mengerti aturan dan struktur sistem Grid pada Bootstrap, selanjutnya akan dibahas contoh penggunaannya. Untuk lebih jelas contoh penggunaan sistem grid.

STACKED-TO-HORIZONTAL

Pada artikel kali ini akan dibahas salah satu tekhnik dasar yang sangat dibutuhkan dalam membuat desain web responsif, yaitu membuat elemen pada halaman situs dengan otomatis menumpuk secara horizontal ketika ketika browser anda di ubah menjadi lebih kecil. Secara tekhnis tidak ada tekhnik khusus yang digunakan, Karena dalam keadaan default, sistem Grid Bootstrap telah mendukung responsive web design. Seperti membuat Grid, biasa anda hanya perlu membuat container, row dan column. Berikut merupakan markup kode jika anda menggunakan container biasa :
Baca juga artikel lainnya :

Tampilan full-window dengan class container

Tampilan setelah di-rezise


Jika di perhatikan 2 gambar di bawah ini, kita menggunakan Grid dengan container-fluid (full-window). Untuk menggunakan container-fluid, kita perlu mengganti <div class="container"> menjadi "<div class="container-fluid">". Perbedaan antara container-fluid dan container adalah lebar container-fluid beradaptasi dengan lebar browser sehingga menutup dari ujung ke ujung (full-width).
Tampilan full-width dengan class container-fluid


Artikel Terkait :


Sekian artikel kali ini, silahkan lanjut ke materi selanjutnya dan budayakan berbagi dan semoga Bermanfaat ...

Share this

Related Posts

Previous
Next Post »