---

Sistem Grid pada Bootstrap

Bootstrap adalah salah satu framework css dan js yang digunakan untuk membuat tampilan website yang responsive dengan berbagai ukuran resolusi perangkat yang berbeda. Dengan menggunakan css dan js dari bootstrap, maka anda dapat membuat tampilan standar website mulai dari form, label, navbar, dan masih banyak lagi dimana semua tampilan sudah responsive dengan resolusi perangkat anda.

Di dalam framework Bootstrap terdapat sistem grid yang digunakan untuk mengatur tampilan sesuai dengan ukuran layar dari perangkat yang digunakan dengan mudah dan cepat.

Pada artikel ini saya akan membahas khusus mengenai sistem grid pada Bootstrap yang disesuaikan dengan beberapa kasus yang ada. Di awal artikel saya akan memperkenalkan beberapa class yang digunakan pada sistem grid disertakan dengan aturan dasar dari masing-masing class. Setelah mengenal class dasar pada sistem grid, materi akan saya lanjutkan ke beberapa contoh penerapan sistem grid.

Pengenalan class untuk sistem grid Bootstrap

Di dalam sistem grid Bootstrap terdapat beberapa class yang digunakan untuk mengatur tampilan sesuai dengan kasus yang ada. Berikut penjelasan dari masing-masing class untuk sistem grid  Bootstrap.

Class Containers

Class containers adalah class terluar dari sebuah elemen konten, dimana class ini akan mengatur lebar konten sesuai dengan class yang digunakan. Di dalam framework Bootstrap terdapat dua jenis containers yaitu .container dan .container-fluid. Berikut adalah penjelasan dari masing-masing class containers yang ada.

1. Class Container
   Class container atau .container memiliki ukuran fixed width atau lebar disesuaikan dengan ukuran yang telah ditentukan atau fix. Maksimal lebar kontainer untuk class ini yaitu 1170px. Beberapa aturan dari .container berdasarkan resolusi perangkat yaitu: (1) Untuk resolusi layar lebih besar atau sama dengan 1200px memiliki lebar kontainer sebesar 1170px, (2) untuk resolusi layar lebih besar atau sama dengan 992px memiliki lebar kontainer sebesar 970px, (3) untuk resolusi layar lebih besar atau sama dengan 768px memiliki lebar kontainer sebesar 750px, dan (4) untuk resolusi layar lebih kecil dari 768px memiliki lebar kontainer sesuai dengan resolusi layar (auto).
   Penerapan dari .container yaitu sebagai berikut:
   

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

2. Class Container Fluid
   Class container fluid atau .container-fluid memiliki ukuran lebar kontainer memenuhi lebar layar (full width). Dengan menggunakan class ini maka kontainer yang anda buat akan memenuli ukuran layar dari semua perangkat yang anda gunakan.
   Penerapan dari .container-fluid yaitu senagai berikut:
   

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

Class Row dan Columns

Class ini digunakan untuk mengatur ukuran layar dengan membagi setiap bagian konten menjadi 12 kolom. Class ini adalah class yang menjadi inti dari grid sistem dari Bootstrap. Adapun aturan yang perlu diketahui untuk grid sistem Bootstrap yaitu sebagai berikut:

1. .row harus diletakkan diantara .container atau .container-fluid untuk keselarasan aligment dan padding.
2. Gunakan .row untuk membuat grup horizontal dari setiap kolom (.col-*-*).
3. Konten harus diletakkan diantara kolom dan hanya kolom yang memungkinkan untuk membuat anak dari .row.
4. Class grid yang telah ditentukan seperti .row dan .col-xs-* tersedia untuk mempercepat pembuatan grid layouts.
5. Class columns akan membuat batas antara kolom dan konten dengan menggunakan padding. Penggunaan margin negatif pada .row akan membuat .row sejajar dengan kolom yang mempunyai batas padding.
6. Grid columns dibuat dengan menentukan nomor dari 12 kolom yang tersedia. Seperti contoh: untuk membuat tiga kolom yang sama pada satu baris maka harus membuat tiga .col-xs-4. Cara untuk menentukan nomor dari kolom yaitu dengan membagi 12 kolom yang tersedia dengan jumlah kolom yang diinginkan.
7. Jika dalam .row memiliki lebih dari 12 kolom maka akan diletakkan pada baris baru yang sebenarnya merupakan satu kesatuan.
8. Class grid berlaku untuk perangkat dengan resolusi lebih besar atau sama dengan ukuran breakpoint dan akan menimpa class grid yang ditargetkan pada perangkat dengan resolusi yang lebih kecil. Menggunakan .col-md-* untuk elemen tidak hanya berpengaruh untuk ukuran medium namun juga akan berpengaruh untuk ukuran layar yang lebih besar jika .col-lg-* tidak direpresentasikan.

Pembagian kolom dalam setiap baris dapat diatur sesuai dengan ukuran layar yang ditargetkan. Untuk setiap resolusi yang ditetapkan bootstrap memiliki class prefix yang digunakan sebagai pembagi baris di setiap resolusi perangkat. Adapun class prefix yang dimaksud yaitu:

• .col-xs-* merupakan class prefix yang digunakan untuk membagi baris pada ukuran kurang dari 768px atau ekstra small.
• .col-sm-* merupakan class prefix yang digunakan untuk membagi baris pada ukuran lebih besar atau sama dengan 768px atau small.
• .col-md-* merupakan class prefix yang digunakan untuk membagi baris pada ukuran lebih besar atau sama dengan 992px atau medium.
• .col-lg-* merupakan class prefix yang digunakan untuk membagi baris pada ukuran lebih besar atau sama dengan 1200px atau large.

Penerapan sistem grid Bootstrap

Setelah memahami dasar dan aturan dari penerapan sistem grid pada Bootstrap, maka selanjutnya materi akan dilanjutkan pada bagian implementasi sistem grid sesui dengan kasus yang ada.

Berikut beberpa kasus dari penerapan sistem grid dari yang sederhana sampai dengan yang lebih kompleks.

1. Kasus pertama yaitu membagi baris menjadi 3 kolom dengan ukuran kolom yang sama pada resolusi Kasus ini dapat diselesaikan dengan mengingat beberapa aturan yang ada yaitu .row harus ada diantara .container atau .container-fluid, .row maksimal berisikan 12 kolom, dan jika ingin membagi .row menjadi ukuran yang sama maka harus membagi 12 kolom dengan jumlah kolom yang ingin dibuat. Sesuai dengan kasus ini, maka kita harus membagi 12 kolom dengan 3 kolom sehingga menghasilkan nilai 4. Penerapan untuk kasus ini yaitu membuat .col-md-4 sebanyak 3 kali. Berikut kode lengkap untuk kasus ini.
   

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

2. Kasus ke dua yaitu penerapan pembagian kolom berdasarkan resolusi layar, dalam kasus ini terdapat 6 kolom yang akan dibagi sesuai dengan ukuran layar. Pada ukuran besar akan dibagi menjadi 6 bagian, pada ukuran medium akan dibagi menjadi 3 bagian, pada ukuran kecil akan dibagi menjadi 2 bagian, dan pada ukuran sangat kecil akan dibagi menjadi 1 bagian. Penyelesaian kasus ini dapat dilakukan dengan melakukan kombinasi class prefix dari kolom. Berikut bait kode penyelesaian untuk kasus ini.
   

   <div class="container">
     <div class="row">
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 1</div>
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 2</div>
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 3</div>
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 4</div>
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 5</div>
       <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 6</div>
     </div>
   </div>

3. Kasus selanjutnya yaitu membuat anak class row, dalam kasus ini akan ada 2 kolom pada resolusi medium yang masing-masing kolom dibagi menjadi tiga bagian yang lebih kecil. Berikut bait kode untuk penyelesaian kasus ini.
   
   

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

Demikian artikel tentang sistem grid pada Bootstrap, semoga artikel ini dapat mempermudah dan membantu anda dalam mempelajari sistem grid dari Bootstrap.

---

---

Artikel Terkait