Tutorial web Design Grid System with Bootstrap

Hi Everyone,

Berjumpa lagi dalam tutorial web design, edisi re-upload konten youtube lama karna database website, gagal backup (red: lupa).

Dalam tutorial kali ini kita akan mengulang untuk belajar menggunakan Grid System dengan menggunakan framework Bootstrap.

Kenapa menggunakan Bootstrap? karna Bootstrap adalah salah satu framework CSS yang mudah dalam menggunakan dan dalam mempelajarinya.

Selain itu, component yang disediakan Bootstrap juga cukup banyak.

Grid system dalam bootstrap cukup mudah diikuti dalam pembuatannya,  terdapat ROW system untuk penanda baris dan juga COL system sebagai penanda kolom.

Kolom dan Grid system Bootstrap (atau yang lain), biasanya mempunyai jumlah total lebar 12 point. dengan poin kolom terkecil adalah 1, dan paling besar adalah 12.

Jika kita menggunakan point kolom terkecil, 1, maka dalam satu baris kita akan mempunyai 12 kolom.

Dan jika kita menggunakan point kolom terbesar, 12, maka dalam satu  baris, kita hanya mempunyai 1 kolom besar.

Setiap kolom, bisa tampil dalam beberapa penyesuaian lebar layar, sebagai berikut namingnya.

SM, mewakili layar Kecill, small.

MD, mewakili layar sedang.

LG, mewakili layar besar.

kita bisa memberikan point lebar kolom berbeda untuk setiap ukuran layar.

untuk lebih jelasnya, silahkan simak video berikut, saya coba menjelaskan dan mencontohkan cara penggunaan Grid system secara langsung pada saat melakukan pemrograman, Bootstrap yagn saya gunakan masih versi 3.x.x.

Selamat mencoba

Comments