Basic Grid di Bootstrap 3

Grid Basic di Bootstrap 3

Setelah kemarin kita membahas mengenai pengenalan bootstrap 3 dan juga membuat halaman pertama menggunakan bootstrap 3. Kini saat nya kita membahas mengenai basic grid di bootstrap 3. Apa tu Basic Grid? Basic Grid adalah pengelompokan kolom secara bersamaan menjadi lebih luas dan juga fleksibel. 

Sistem Grid Bootstrap

Sistem grid Bootstrap memiliki banyak tipe hingga 12 kolom di seluruh halaman.

Jika kita tidak ingin menggunakan semua 12 kolom satu per satu, kita dapat mengelompokkan kolom secara bersamaan untuk membuat kolom yang lebih luas. Berikut ini contoh sistem grid pada bootstrap.

Sistem Grid pada bootstrap diatur secara otomatis sesuai dengan ukuran layar desktop kita agar tampilan menjadi lebih responsive dan fleksibel.

Grid Class

Sistem Grid pada bootstrap memiliki 4 class, yaitu :

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

Class-class diatas dapat kita kombinasikan saat membuat layout agar tampilan lebih dinamis dan fleksibel pada semua devices.

Struktur Dasar dari Grid Bootstrap

Setelah mengetaui aturan dasar dari sistem grid, kini kita akan membuat sebuah layout menggunakan grid bootstrap. Berikut ini adalah struktur dasar dari grid bootstrap 3.

<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; buat baris (<div class="row">). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan .col-*-* kelas yang sesuai ). Perhatikan bahwa angka dalam .col-*-* harus selalu menambahkan hingga 12 untuk setiap baris.

Di bawah ini saya telah mengumpulkan beberapa contoh tata letak kotak Bootstrap dasar.

Grid Tiga Kolom Setara

<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>

Dan hasilnya seperti dibawah ini.

Grid Dua Kolom Tidak Setara

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

Dan hasinya seperti dibawah ini.

Agar lebih mahir dalam penggunaan Grid di bootstrap, silahan pelajari lebih dalam secara otodidak ya. Diatas adalah dasar-dasarnya. Jangan patah semangat. 

Sekian untuk hari ini, terima kasih.

Share this post