Yii2 - Bagaimana mengatur Twitter Bootstrap column menjadi rapi pada Listview

Listview sangat memudahkan developer untuk membuat tampilan data menjadi rapi, alih-alih membuat perulangan manual menggunakan looping.
Published di Yii2, 2 years ago

Twitter bootstrap dibangun menggunakan Grid Sistem, sehingga cukup cerdas mengatur jumlah column yang ditampilkan pada satu row berdasarkan ukuran layar perangkat user. 


Satu row bisa menampung 12 column, jadi jika kita menampilkan tiga column pada layar medium, maka kita bagi 12/3 = 4. Selanjutnya Bootstrap cukup cerdas bahwa row ini sudah 12 column dan memaksa menampilkan kolom ke baris selanjutnya (di underhood).

Dengan keuntungan ini, Yii2 ListView bisa menampilkan column ini dengan rapi dengan sangat simple, yaitu dengan cara menambahkan row dan column pada posisi option yang tepat, sebagai berikut.


Sehingga tiap komponen item_product akan konsisten, contohnya sebagai berikut:

Demikian dan semoga berguna

Dukung Saya supaya tetap menulis artikel-artikel yang baik, membayar sewa domain, dan server untuk blog ini. Caranya dengan donasi cendol via Trakteer.id.


No image

Fadly Dzil Jalal

PHP, Yii2 Framework, Laravel, Java, Java Swing, Hibernate, Javascript, Angular, React, MySQL, MongoDB


Dapatkan USD 200 untuk develop aplikasimu di DigitalOcean DigitalOcean Referral Badge