Bootstrap Grids

I.Latar Belakang.
Membuat suatu tampilan dengan Bootsrap.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar tampilan suatu program itu responsiv.

IV.Penjelasan. 
Bootstrap Grids
Bootstrap Sistem Grid
sistem grid bootstrap memungkinkan hingga 12 kolom di halaman.
Jika Anda tidak ingin menggunakan semua 12 kolom secara individual, Anda dapat mengelompokkan kolom sama untuk menciptakan kolom yang lebih luas:

sistem grid bootstrap adalah responsif, dan kolom akan menata kembali secara otomatis, tergantung pada ukuran layar.

Grid Kelas
Sistem Bootstrap jaringan memiliki empat kelas:

•     xs (untuk ponsel)
•     sm (untuk tablet)
•     md (untuk desktop)
•     lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.

Struktur dasar dari Bootstrap Grid
Berikut ini adalah struktur dasar dari grid Bootstrap:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

Pertama; membuat baris (<div class = "row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan .col yang tepat - * - * kelas). Perhatikan bahwa angka dalam .col - * - * harus selalu menambahkan hingga 12 untuk setiap baris.

Di bawah ini kami telah mengumpulkan beberapa contoh layout Bootstrap jaringan dasar.

Tiga Kolom Sama
.col-sm-4
.col-sm-4
.col-sm-4

Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga kolom yang sama-lebar mulai dari tablet dan skala untuk desktop besar. Pada ponsel, kolom secara otomatis akan menumpuk:
Contoh

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Dua Kolom yang tidak merata
.col-sm-4
.col-sm-8

Contoh berikut menunjukkan bagaimana untuk mendapatkan dua kolom berbagai lebar mulai dari tablet dan skala untuk desktop besar:
Contoh

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Contoh :

 Maka outputnya :

V.Kesimpulan.
Bootsrap adalnyah suatu css yang sudah di tetapkan dan kita hanya tinggal menggunakan.

VI.Refrensi.
  w3schools/bootstrap/bootstrap_grid_basic.html