mengenal bootstrap, belajar bootstrap, tutorial bootstrap, apa itu bootstrap

Grid System – Dasar Pembuatan Web Responsive di Bootstrap 3

System grid merupakan dasar dari pembuatan web responsive. Tanpa memahami apa itu Grid System, maka semua tutorial mengenai web responsive tidak ada manfaatnya. System grid Bootstrap membagi layar menjadi 12 bagian kolom. Saat membuat desain web responsive, kita bisa mengunakan fitur lebar otomatis maupun pengaturan customize.

Struktur penggunaan Grid

Anda bisa mengatur grid dengan pola sebagai berikut:

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

atau jika diinginkan menggunakan lebar layar penuh tanpa ada jarak di pinggir layar bisa dengan class .container-fluid sebagai berikut:

<div class="container-fluid">
  <div class="row">
    ... 
  </div>
</div>

Silahkan baca artikel Menentukan Jenis Container Bootstrap untuk mengetahui perbedaan antara .container dan .container-fluid

tanda titik 3 (…) di coding di atas kita isi dengan class .col-media-lebar. Media dalam bootstrap ada 4 jenis yaitu:

  • xs atau extra small untuk device dengan lebar layar dibawah 768 pixel
  • sm atau small device untuk device dengan lebar layar 768 – 991pixel
  • md atau medium device untuk device dengan lebar layar 992 – 1199 pixel
  • lg atau large device untuk device dengan lebar layar diatas 1200 pixel

sedangkan lebar bisa kita isi dengan angka antara 1 sampai 12. Anda bebas menentukan angkanya dengan syarat dalam satu row jumlahnya harus 12.
Contoh:

<div class="container">
  <div class="row">
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-1">col-md-1</div>
  </div>
  <div class="row">
     <div class="col-md-1">col-md-1</div>
     <div class="col-md-2">col-md-2</div>
     <div class="col-md-3">col-md-3</div>
     <div class="col-md-4">col-md-4</div>
     <div class="col-md-2">col-md-2</div>
  </div>
  <div class="row">
     <div class="col-md-3">col-md-3</div>
     <div class="col-md-3">col-md-3</div>
     <div class="col-md-3">col-md-3</div>
     <div class="col-md-3">col-md-3</div>
  </div>
</div>

Maka hasilnya adalah sebagai berikut:

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1

col-md-1
col-md-2
col-md-3
col-md-4
col-md-2

col-md-3
col-md-3
col-md-3
col-md-3

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>