Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Belajar Bootstrap Bag.2

Belajar Bootstrap Untuk Pemula

- Bagian 2 - GRID SYSTEM

Apa Itu Grid System ?

Grid System adalah sistem pembuatan layout sebuah website berdasarkan baris dan kolom. Berikut cara kerja dari Grid System.

• Baris atau Class .row harus di letakan di dalam Class .container atau Class .container-fluid.
• Class . row digunakan untuk membuat sebuah kolom horizontal.
• Isi Content harus ditempatkan didalam kolom dengan Class .col-xs-*, col-sm-*, col-md-*, col-lg-* .
• System Grid seperti Class .row dan Class .col-md-* biasa digunakan untuk membuat layout kolom berbentuk kotak dengan cepat dan juga menjadi lebih simantik.
• Grid System diciptakan dengan menentukan 12 kolom yg tersedia di sebuah tampilan website, Sebagai contoh : di dalam Class .row anda ingi membuat 4 kolom yg sama, maka anda bisa menggunakan Class .col-md-3 .

Pembagian Kolom dalam Grid System Bootstrap

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Grid System

Ilustrasi Grid System Bootstrap.

Sekarang, buat lah sebuat html file lalu copas script dibawah ini :

See the Pen Bootstrap Grid System by Rendi Febrian (@rendi-febrian) on CodePen.

Maka hasil dari code tersebut akan menjadi :

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Sekarang coba kalian kecilkan / resize ukuran browser kalian. Maka akan berubah seperti ini :

Jika Ukuran browser kurang dari 1200px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jika Ukuran browser kurang dari 992px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jika Ukuran browser kurang dari 788px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jagat-Info.com


Penulis : Jagat Info
Link : https://www.jagat-info.com/2018/10/belajar-bootstrap-v3.3.7-untuk-pemula-bag-2.html