Bootstrap : Menggunakan Grid untuk mengatur penempatan website

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai cara mengatur penempatan posisi website dengan Grid yang ada di bootstrap. apa itu Grid?, fungsi nya apa?, cara gunainnya gimana?, simak aja...

A. PENDAHULUAN

Pengertian

Grid merupakan suatu metode pada bootstrap yang digunakan untuk mengatur penempatan desain suatu website.

Latar Belakang

Ingin mengatur penempatan posisi halaman website dengan Grid.

Maksud dan Tujuan

Dapat Mengatur penempatan website dengan mudah dengan menggunkan Grid.

B. ALAT DAN BAHAN

Text Editor.
Web Browser.
Library CSS (Saya menggunakan Bootstrap).
1 Unit PC/Laptop.

C. JANGKA WAKTU PELAKSANAAN

Sekitar 10-20 menit

D. RANGKAIAN KEGIATAN

Definisi Grid

Grid pada bootstrap merupakan pengaturan ukuran yang di tampilkan pada layar monitor, Grid ini berfungsi untuk membuat dan mengatur ukuran juga penempatan konten konten yang ada di dalam sebuah website, sehingga dengan Grid ini kira dapat mengatur resposive halaman website yang kita buat dengan Bootstrap, bootstrap memiliki 12 Grid.

Cara Penulisan Grid

bootstrap memiliki Beberapa Class Grid yang didalamnya terdapat fungsinya sendiri". berikut merupakan class grid nya...

col-lg-(seterusnya).
    digunakan untuk mengatur grid pada monitor komputer yang berukuran besar. dan digunakan untuk layar dengan lebar lebih dari atau sama dengan 1200px
col-md-(seterusnya).
    digunakan untuk mengatur grid pada monitor komputer yang berukuran sedang. dan digunakan untuk layar dengan lebar lebih dari atau sama dengan 992px.
col-sm-(seterusnya).
    digunakan untuk mengatur grid pada monitor yang berukuran seperti TABLET/Ipad. dan digunakan untuk layar dengan lebar lebih dari atau sama dengan 768px.
col-xs-(seterusnya).
    digunakan untuk mengatur grid pada ukuran Handphone, dan digunakan untuk layar dengan lebar kurang d1ri 768px

#catatan : ganti (seterusnya) dengan angka Grid 1-12

berikut merupakan contoh penulisan grid.

pertama tama kita buat folder dengan nama terserah anda, kemudian copy file bootstrap yang tadi anda download dan paste ke dalam folder yang anda buat tadi.