Tutorial Bootstrap Part 2 : Grid Bootsrap

Assalamu'alaikum W.W

Oke pada kesempatan kali ini rekayasaternaklele akan membahas tentang Grid pada Bootstrap

Judul
Tutorial Bootstrap Part 2 : Grid Bootsrap

Pengertian

Menurut Wikipedia, Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Latar Belakang

Mencari kemudahan dalam membuat front-end website yang cepat,responsive dan praktis sehingga kita tidak perlu menulis kode CSS dari nol.

Maksud dan Tujuan
Memahami dan bisa menggunakan Bootsrap sehingga pengembangan fron end website lebih efektif dan efisien.

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan

Grid sistem merupakan pengturan ukuran yang ditampilkan pada monitor. Grid sistem berfungsi untuk membuat pengaturan lebar dari masing-masing komponen web sehingga kita dapat mengatur responsiv halaman website yang kita buat dengan bootstrap. Bootstrap menggunakan flexbox untuk membangun grid  dan memungkinkan hingga 12 kolom.
Jenis-jenis Grid dalam Bootstrap:

• col- (Perangkat tambahan kecil-layar lebar kurang dari 576px)
• col-sm-(Perangkat kecil - layar lebih besar atau sama dengan 576px)
• col-md- (Perangkat Medium-lebar layar sama atau lebih besar dari 768px)
• col-lg -(Perangkat besar - lebar layar sama dengan atau lebih besar dari 992px)
• col-xl- (Perangkat extra besar - lebar layar sama atau lebih besar dari 1200px) 

Contoh responsive :

Kesimpulan
Grid memudahkan kita dalam mengatur tampilan yang akan ditampilkan monitor.

Referensi

https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

Share this post