Mengenal Sistem Grid di Bootstrap dan Penerapannya

Setelah kemarin kita belajar cara membuat template dasar menggunakan Bootstrap, sekarang kita belajar mengenal sistem grid pada Bootstrap sekaligus penerapannya. Untuk membuat sebuah template web yang bagus dan rapi, maka kita harus mempelajari sistem grid pada Bootstrap, karena ini merupakan salah satu komponen penting dalam pembuatan template Bootstrap.

Apa itu sistem grid pada Bootstrap?

Sistem grid pada Bootstrap adalah suatu aturan baku yang digunakan untuk pembuatan dan penataan layout halaman dengan menggunakan rangkaian baris dan kolom untuk penempatan konten kita nantinya.

Cara kerja sistem grid pada Bootstrap:

Beberapa diantaranya adalah:

1. Setiap kolom harus terletak di antara kode .container (fixed-width) atau .container-fluid (full-width)
2. Sistem grid pada Bootstrap memperbolehkan kita mengatur hingga 12 kolom dalam 1 baris, dengan catatan jumlah setiap kolom dalam 1 baris tersebut harus pas 12. Biar lebih jelas, silahkan liat diagram dibawah ini:
   
   
3. Sistem grid pada Bootstrap bersifat responsive, jadi kolom-kolomnya akan secara otomatis tersusun mengikuti ukuran layar.
4. Penggunaan kelas pada grid dapat digunakan pada layar yang lebih besar maupun yang lebih kecil dari batasan. Contohnya .col-md-* untuk ukuran layar 970px, tapi bisa berfungsi dengan baik untuk layar yang lebih kecil (kalau kelas .col-xs-* atau .col-sm-* tidak digunakan) ataupun yang lebih besar (kalau kelas .col-lg-* tidak digunakan)

Kelas pada grid

Sistem grid pada Bootstrap mempunyai 4 kelas;

• xs (untuk Smartphone)
• sm (untuk Tablet)
• md (untuk Desktop)
• lg (untuk Desktop besar)

Anda bisa menggunakan kelas-kelas tersebut secara mandiri ataupun digabung. Untuk penjelasan dari masing masing kelas, silahkan lihat tabel dibawah ini:

Struktur Dasar grid Bootstrap

Struktur dasar pada grid Bootstrap adalah sebagai berikut:

<div class="row">
  <div class="col-*-*">isi kolom</div>
</div>

Letakkan kode diatas, diantara .container

<div class="container">
  Letakkan struktur dasar grid disini
</div>

atau .container-fluid

<div class="container-fluid">
  Letakkan struktur dasar grid disini
</div>

Tempatkan kode tersebut di antara <!-- AWAL KONTEN -->' sampai '<!-- AKHIR KONTEN --> pada template dasar yang sudah saya ulas pada artikel saya sebelumnya. Jika belum membacanya atau belum membuat template dasarnya, silahkan baca artikelnya disini
Dengan berpedoman pada struktur dasar diatas, kita dapat mengembangkan grid sesuai kebutuhan kita. Contohnya, bila ingin membuat 2 kolom, kodenya:

<div class="row">
<div class="col-md-6">isi kolom 1</div>
<div class="col-md-6">isi kolom 2</div>
</div>

maka hasilnya jadi seperti ini:

isi kolom 1 isi kolom 2

atau

<div class="row">
<div class="col-md-4">isi kolom 1</div>
<div class="col-md-8">isi kolom 2</div>
</div>

hasilnya jadi seperti ini:

isi kolom 1 isi kolom 2

atau dengan ukuran yang lain yang penting jumlah totalnya maksimal 12.
Untuk membuat 2 baris, struktur dasarnya adalah:

<div class="row">
  <div class="col-*-*">isi kolom baris 1</div>
</div>
<div class="row">
  <div class="col-*-*">isi kolom baris 2</div>
</div>

hasilnya jadi seperti ini:

isi kolom pada baris 1 isi kolom pada baris 2

Ya, hanya dengan menambahkan

<div class="row">
...
</div>

pada struktur dasar diatas. Untuk membuat 3 baris atau lebih, caranya sama seperti itu.

Offsetting kolom

Sebenarnya saya bingung, bahasa indonesianya offsetting itu apa.. haha.. Tapi yang pasti offsetting disini maksudnya adalah memindahkan kolom kekanan menggunakan kelas .col-md-offset-* Kelas ini meningkatkan/menambah margin kiri suatu kolom sebanyak * kolom. Contohnya .col-md-offset-4 berarti memindahkan .col-md-4 sebanyak empat kolom.
Contoh kodenya seperti ini:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Hasilnya akan terlihat seperti gambar dibawah ini:

Nesting kolom (kolom bersarang)

Kolom bersarang disini maksudnya kita menaruh kolom didalam kolom. Untuk menaruh kolom di grid default, tambahkan .row baru dan set kolom .col="sm-* dengan kolom .col="sm-* yang sudah ada. Baris yang bersarang harus berisi kolom yang berjumlah 12 atau kurang (anda tidak perlu menggunakan semua 12 kolom yang tersedia) Berikut ini kode yang dibutuhkan:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

hasilnya dapat dilihat pada gambar dibawah ini:

Oke, untuk sementara sampai disini dulu pembahasan kita mengenai sistem grid. Sebenarnya masih banyak bahasan tentang sistem grid yang belum saya ulas disini, saya hanya membahas yang sering digunakan saja, dan saya rasa ini sudah cukup untuk mempelajari sistem grid pada Bootstrap. Selanjutnya tergantung bagaimana anda mengembangkannya. Artikel saya selanjutnya akan membahas typography pada Bootstrap. Silahkan baca artikelnya disini.
Semoga sukses.