Tutorial Belajar Bootstrap 4 Part 2 – Mengenal Grid System pada bootstrap

Dalam tutorial kali ini kita akan membahas mengenai Grid System pada bootstrap 4, Grid System adalah pengaturan ukuran elemen web yang ditampilkan pada monitor atau device lainnya.

Dengan menggunakan grid system ini kita bisa mengatur lebar dari masing – masing elemen web, sehingga kita dapat mengatur bagaimana tampilan web ketika diakses dari beberapa jenis device semisal smartphone atau komputer desktop, tampilannya akan menyesuaikan settingan Gridnya, jadi anda dapat mengatur tingkat responsive dari masing – masing elemen sesuai dengan grid yang digunakan.

Pada bootstrap memiliki 12 grid (bagian), dengan 12 grid ini anda dapat mengatur tingkat responsive dari halaman web pada saat menyesuaikan resolusi dari device yang mengakses halaman web.

 

Grid system pada bootstrap memiliki 5 class yang memiliki fungsi masing – masing, antara lain :

1. .col –         :  (digunakan untuk device yang sangat kecil dengan ukuran lebar layar kurang dari 576 pixel)
2. .col-sm-   : (digunakan untuk device kecil dengan lebar layar 576 pixel atau lebih)
3. .col-md-   : (digunakan untuk ukuran device menengah dengan ukuran lebar 768 pixel atau lebih)
4. .col-lg-     : (digunakan untuk device ukuran besar, dengan ukuran lebar 992 pixel atau lebih)
5. .col-xl-     : (digunakan untuk device dengan ukuran yang sangat lebar, dengan ukuran 1200 pixel atau lebih)

 

nah ada 5 class yang memiliki perbedaan pada ukuran lebar  device yang mengakses, semisal nih kita memiliki sebuah elemen web dengan menggunakan class .col-sm-

Pada keterangan diatas untuk class .col-sm-  tertulis digunakan untuk ukuran lebar layar 576 pixel atau lebih, berarti jika nanti device yang mengakses itu ukuran lebarnya kurang dari 576 pixel, maka elemen web tersebut akan ditampilkan didalam baris baru.

Sebagai contoh kita perhatikan skrip dibawah ini, untuk skrip ini kita gunakan bootstrap yang kita panggil secara online, jadi untuk mencoba skrip ini pastikan anda terkoneksi dengan internet, untuk pembahasan mengenai instalasi bootstrap 4 silahkan baca dulu mengenal bootstrap , baik silahkan skrip dibawah ini :

Semisal kita simpan dengan nama grid_system_bootstrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

 

Keterangan :

• maka hasil yang ditampilkan sebagai berikut,, halaman web dibagian menjadi 3 bagian disetiap barisnya
• skrip yang ditulis untuk setiap baris diawali dengan <div class=”row”> lalu didalamnya kita bisa menuliskan jumlah  kolom yang ada disetiap baris, dengan menggunakan class=”col”, anda dapat menyebutkan berupa jumlah grid pada setiap kolomnya, pokoknya jumlahnya harus 12 disetiap barisnya
• jika anda tidak menentukan jumlah grid dimasing – masing kolom, seperti pada baris ketiga, maka bootstrap akan menyesuaikan ukurannya berdasarkan jumlah kolom yang ada pada baris tersebut, seperti contoh pada bagian baris ke-3 ada 3 kolom maka masing – masing kolom mendapatkan 4 grid sehingga memiliki ukuran lebar yang sama pada masing – masing kolom.

 

Berikutnya kita coba rubah ukuran dari lebar browser, kalau anda menggunakan mozilla firefox, bisa menggunakan cara :

klik kanan inspect element, lalu aktifkan menu “responsive design mode”

 

maka anda akan mengatur ukuran lebar dari browser, semisal ukurannya kita rubah jadi 576 pixel, maka hasilnya seperti pada gambar dibawah ini :

Keterangan :

• Perhatikan bagian MD – 1, MD – 2, MD – 3, ketiga elemen tersebut menggunakan class col-md- dimana fungsi dari class ini digunakan untuk elemen dengan ukuran lebar browser 768 pixel atau lebih, nah karena kita set ukuran lebar browser adalah 576 maka otomatis elemen yang menggunakan class col-md- akan ditampilkan di baris baru, sehingga untuk kolom MD – 1,MD – 2,MD – 3 saling menumpuk.
• untuk elemen yang menggunakan class col saja dibaris ke – 3 yaitu COL – 1, COL – 2, COL – 3, tetap ditampilkan secara horizontal seperti sebelumnya, bootstrap akan menyesuaikan ukuran pada masing – masing kolom pada baris ke – 3, karena kita tidak menuliskan class grid pada elemen ini.
• untuk elemen pada baris pertama yang menggunakan class col-sm juga tetap ditampilkan secara horizontal, karena secara fungsi untuk col-sm digunakan untuk ukuran lebar 576 pixel atau lebih, jadi masih ditampilkan dalam satu baris.

 

Berikutnya kita coba untuk kurangi lagi ukuran lebarnya menjadi 575 pixel maka yang terjadi adalah :

Keterangan :

• yang terjadi untuk elemen dengan menggunakan class col-sm akan ditampilkan secara vertical, karena ukuran lebar dari layar adalah 575 pixel, jadi kurang dari aturan class col-sm yang harus memiliki ukuran lebar 576 pixel atau lebih.
• pada baris ke – 3 yaitu COL – 1, COL – 2,COL – 3 yang menggunakan class col saja tetap ditampilkan secara horizontal pada satu baris karena tidak ada penggunaan class grid tertentu.

 

 

Membuat Layout Web dengan Grid System Bootstrap

Nah setelah dalam bagian sebelumnya kita telah belajar mengenai beberapa class yang digunakan pada bagian grid, berikutnya kita akan membuat sebuah layout web sederhana dengan perpaduan beberapa class pada grid, untuk skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama layout_bootstrap.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Tampilannya seperti gambar diatas, ini ketika kita buka di laptop dengan resolusi lebar 1366 pixel, seluruh bagiannya ditampilkan sebagaimana mestinya, untuk sidebar dan content ditampilkan secara horizontal dalam satu baris layout.

 

 

Keterangan :

• Berikutnya kita ubah lebar browsernya menjadi 768 pixel, maka tampilan dari sidebar dan konten masih ditampilkan bersebelahan, karena kita menggunakan class col-md-3 pada sidebar, dan class col-md-9 pada content sehingga dengan lebar layar 768 pixel maka tampilan elemen sidebar dan kontent web masih ditampilkan secara horizontal dalam satu baris layout, karena col-md digunakan untuk lebar 768 atau lebih.
• maksud dari col-md-3 pada element sidebar dan col-md-9 pada elemetn content disini adalah, sidebar mendapatkan 3 bagian dari 12 bagian grid (3/12 bagian), dan content mendapat 9 bagian dari 12 grid (9/12 bagian), jadi bisa dikatakan untuk membagi bagian grid dari bootstrap yang berjumlah 12 grid

 

 

Keterangan :

• Berikutnya kita rubah lagi lebar layar browser menjadi 767 pixel, maka hasilnya adalah seperti gambar diatas, sidebar dan content ditampilkan di baris yang berbeda hal ini dikarenakan untuk class col-md digunakan untuk 768 pixel ke atas, jadi ketika kita mengakses dengan  device yang memiliki lebar layar 767 pixel maka elemen web tersebut akan ditampilkan didalam baris baru.

 

Menggunakan Beberapa class grid sekaligus

pada elemen – elemen web kita bisa menambahkan beberapa class grid sekaligus, contohnya nih untuk element sidebar kita gunakan class=”col-md-3 col-sm-12 menu”, ada 2 class grid yaitu col-md-3 dan col-sm-12, cara membacanya adalah seperti ini :

• col-md-3 digunakan jika nanti device yang digunakan untuk mengakses web memiliki lebar 768 pixel atau lebih, maka elemen sidebar akan mendapatkan 3 grid dari total 12 grid. jadi elemen sidebar akan ditampilkan 3/12 bagian dari satu baris layout web, jangan lupa dalam satu baris layout itu memiliki 12 grid
• col-sm-12 digunakan jika nanti device yang digunakan untuk mengakses web memiliki lebar 576 pixel atau lebih maka elemen sidebar akan mendapatkan 12 grid yang artinya ditampilkan pada 1 baris layout secara penuh.

 

Bagaimana teman – teman mudah bukan untuk memahami konsep dari grid system yang ada di bootstrap 4, jika ada yang ingin didiskusikan silakan di kolom komentar, baik sekian dulu pembahasan mengenai grid system di bootstrap 4, sampai jumpa di tutorial selanjutnya.