Cara menggunakan grid bootstrap

Kita langsung mulai coding. Saya sudah menyediakan satu buah source code baru yang merupakan boilerplate dari Bootstrap 5. Kali ini saya beri judul “Responsive Grid System”. Dan ini adalah hasilnya bila kita lihat dari browser.

Untuk menggunakan Grid pada Bootstrap, pertama kita harus membuat container terlebih dahulu. Caranya kita tambahkan sebuah div dengan mengggunakan kelas container. Gunanya untuk apa? Sesuai dengan namanya ya, container adalah sebuah wadah untuk menampung konten. Seluruh konten bootstrap harus berada di dalam kontainer. Termasuk navbar yang telah kita pelajari pada video sebelumnya.

Kalau kita lihat kembali ke dokumentasi Bootstrap mengenai Navbar, dan kita lihat lagi ke contoh kode yang diberikan. Sebenarnya komponen Navbar ini seharusnya dibungkus di dalam container. Bisa kita lihat disini, setelah tag nav, ada sebuah tag div yang menggunakan kelas container-fluid. Di video sebelumnya kita tidak membahas mengenai container ini ya, karena kita ingin lebih berkonsentrasi pada komponen navbarnya. Lagipula khusus untuk komponen navbar, dapat berfungsi dengan baik walaupun tidak menggunakan container, jadi disini container adalah opsional.

Namun sebaliknya untuk menggunakan Grid, kita diharuskan menggunakan container, kalau tidak maka grid tidak bisa berfungsi dengan benar. Jadi pada awal video ini kita akan membahas terlebih dahulu mengenai container.

Nah, berhubung semua konten mesti berada di dalam kontainer, artinya kita pindahkan tag h2 ke dalam kontainer. Dan agar kita bisa melihat dengan lebih jelas bagaimana sih bentuk container di dalam browser, maka kita tambahkan kelas bg-primary pada tag div.

Kita simpan dan refresh browser. Nah sekarang kita memiliki judul Responsive Grid System yang berada di dalam container. Perhatikan bahwa tag container menggunakan warna latar belakang primary, yaitu warna biru. Jadi kita bisa melihat dimana posisi kotak container. Perhatikan bahwa container berada di tengah browser, dan ada margin pada bagian kiri dan kanan continer.

Pada saat saya mengecilkan container, maka ukuran dari container adalah tetap dan posisinya selalu di tengah browser. Namun ukuran margin pada sebelah kiri dan kanan container semakin kecil. Pada saat mencapai breakpoint, maka ukuran container berubah namun setelah itu akan tetap sama hingga ke breakpoint berikutnya. Jadi sekarang teman-teman bisa menangkap ya, kurang lebih container itu seperti apa.

Pada Bootstrap, ada 2 jenis container. Yang pertama adalah container biasa seperti yang kita lihat barusan, yang berfungsi untuk meletakkan konten pada tengah layar dengan ukuran fix berdasarkan breakpoint. Container yang kedua adalah container-fluid, yang berfungsi untuk meletakkan konten di seluruh layar browser.

Sebagai contoh, kita ubah nama kelas container pada tag div, menjadi container-fluid. Kita simpan dan refresh browser. Perhatikan sekarang bahwa warna latar belakang biru berada dari ujung kiri browser hingga ke ujung kanannya. Dan apabila kita mengubah ukuran browser, maka warna birunya mengikuti ujung browser.

Sekarang pertanyaannya, kapan kita menggunakan container dan kapan kita menggunakan container-fluid? Kita menggunakan container pada situs-situs yang berisikan konten, seperti berita, blog, sales letter dan lain-lain. Dengan menggunakan container, konten kita lebih enak untuk dibaca, dan kita juga lebih gampang untuk mengatur bagaimana cara situs menampilkan kontennya. Sedangkan container-fluid lebih banyak digunakan pada software yang berfungsi untuk menampilkan data, terutama data dalam bentuk tabel dan grafik. Contohnya adalah software pos atau mesin kasir, atau software akuntansi, dan lain-lain. Dengan menggunakan container-fluid, kita bisa memanfaatkan semua ruang yang tersedia pada browser, sehingga kita bisa menampilkan lebih banyak data di layar.

Nah, pada bootstrap juga tersedia pilihan untuk menggunakan kedua jenis container sekaligus. Jadi untuk layar dengan ukuran kecil, kita menggunakan container-fluid, hingga mencapai breakpoint tertentu, kita berganti ke container biasa. Caranya? Kita tinggal mengganti nama kelasnya menjadi container dash breakpoint. Sebagai contoh, apabila kita ingin agar container berubah di layar ukuran large, maka kita mengubah nama kelasnya menjadi container-lg. Kita simpan dan refresh browser. Sekarang perhatikan pada saat browser berukuran kecil, maka kita menggunakan container-fluid. Dan kemudian pada saat memasuki breakpoint large, maka pada sisi kiri dan kanan browser mulai mengandung margin, artinya mulai dari large kita sudah berpindah menjadi menggunakan container biasa.

Kita kembalikan dahulu class container ke versi biasa dan kita hapus kelas bg-primary. Selanjutnya, setelah container, kita memerlukan kelas row untuk menandakan setiap baris di dalam grid. Kita tambahkan div dengan kelas row setelah tag h2. Kita coba isi dengan kata konten 1. Simpan dan refresh browser.

Nah, sekarang kita lihat kata konten 1 berada sedikit lebih kiri dibandingkan dengan judul. Kalau kita Inspect. Ternyata pada row terdapat negatif margin, baik di sisi kiri, kanan maupun atas. Tidak masalah ya, karena seharusnya kita tidak boleh menaruh konten secara langsung di dalam kelas row. Konten harus kita bungkus lagi di dalam kelas col atau kolom. Sebagai contoh, kita tambahkan div lagi dengan kelas col. Lalu kita pindahkan Konten 1 ke dalam div tersebut. Dan sekarang posisi konten sudah sejajar dengan judul. Agar bisa melihat lebih jelas seberapa besar kelas col ini, kita bisa tambahkan kelas bg-primary di sampingnya. Jadi sekarang kita bisa melihat kolom kita dengan warna latar belakang biru.

Kita review balik ya. Jadi untuk menggunakan Grid System, yang pertama kita harus menggunakan kelas container sebagai wadah untuk menampung seluruh konten. Yang kedua kita harus menggunakan kelas row untuk menandakan setiap baris pada grid. Dan yang terakhir kita harus menggunakan kelas col untuk menandakan setiap kolom di dalam baris.

Selanjutnya, bagaimana bila kita ingin menambahkan kolom berikutnya di dalam baris ini? Kita tinggal copy isi div col dan kemudian kita paste dibawahnya. Kita ubah warnanya, misalkan menjadi bg-secondary. Dan kemudian kontennya kita ubah menjadi Konten 2. Kita simpan dan refresh browser. Kita bisa melihat bahwa sekarang kita memiliki 2 buah kolum dengan warna yang berbeda, dengan ukuran masing-masing setengah kontainer.

Sekarang kita copy seluruh isi dari div row. Dan kita paste dibawahnya. Kita membuat baris baru, dan kali ini kita ingin agar kontennya terdiri dari 3 kolom. Kita copy lagi div col, dan kita paste dibawahnya. Kali ini kita ubah kelas warnanya menjadi bg-danger dan kontennya menjadi nomor 3.

Kita simpan dan refresh browser. Sekarang kita sudah memiliki baris kedua yang terdiri dari 3 kolom. Kita bisa melihat bahwa kelas col bisa secara otomatis membentuk 3 kolom yang ukurannya sama besar. Jadi kita tinggal tambahkan saja div col sebanyak yang kita butuhkan, dan grid kita bisa dibuatkan secara otomatis, dengan syarat ukurannya sama besar ya.

Bagaimana bila kita ingin mengatur ukuran dari masing-masing kolom? Sebagai contoh, kita copy lagi row yang terdiri dari 2 kolom dan kita paste sebagai baris ketiga. Kita bisa menambahkan nilai 1 hingga 12 setelah kelas col untuk menunjukkan berapa lebar kolom tersebut. Secara default, setiap baris dalam grid memiliki 12 unit lebar. Jadi apabila kita menggunakan kelas col-1 artinya kolom tersebut akan menggunakan lebar 1/12 dari baris. Kalau kita menggunakan col-6 artinya kolom tersebut akan menggunakan separuh dari baris. Dan kalau kita menggunakan col-12 artinya kolom tersebut akan menggunakan seluruh baris.

Sebagai contoh, kita gunakan kelas col-1 pada konten pertama dan col-2 pada konten kedua. Kita simpan dan refresh browser. Kita bisa melihat sekarang kita sudah memiliki baris ketiga, dengan kolom pertama yang hanya menggunakan 1/12 ukuran baris, dan kolom kedua yang menggunakan 1/6 ukuran baris. Ukuran kolom kedua adalah dua kali lipat kolom pertama. Dan secara total kedua kolom menggunakan ¼ ukuran baris. Sisa baris yang tidak digunakan menjadi ruang kosong.

Kalau misalkan kita ubah col-1 menjadi col-6. Maka sekarang kolom pertama menggunakan separuh ukuran baris. Sedangkan kolom kedua tetap menggunakan 1/6 ukuran baris.

Kita coba ubah lagi col-6 menjadi col-11. Nah, sekarang perhatikan bahwa bahwa kolom pertama sudah menggunakan 11 dari 12 unit baris. Di sebelah kanannya ada 1/12 ruang kosong. Dan berhubung kolom berikutnya berukuran 2 unit, dimana sudah tidak muat karena satu baris hanya berisi 12 unit, maka kolom kedua secara otomatis dipindahkan ke baris berikutnya.

Bagaimana bila kita ingin agar kedua kolom harus berada di baris yang sama? Maka kita harus menghitung ulang total lebar seluruh kolom agar nilainya 12. Misalkan kolom pertama kita ubah menjadi col-10. Artinya kolom pertama berukuran 10 dan kolom kedua berukuran 2, totalnya 12. Maka kedua kolom ditampilkan menggunakan satu baris penuh.

Jadi kurang lebih begini ya cara kita melakukan pemograman grid menggunakan Bootstrap. Pertama kita tentukan dahulu satu baris hendak kita isi dengan berapa kolom. Kemudian kita atur lebar dari masing-masing kolom, dengan total lebar harus 12 unit, sehingga grid bisa menggunakan seluruh lebar baris yang tersedia.

Sekarang kita masuk ke bagian terakhir dari Grid System. Kita hendak membuat Grid yang bersifat responsive. Kita ingin agar konten kita ditampilkan dalam 4 kolom pada browser dengan ukuran besar, 2 kolom pada browser yang berukuran menengah dan 1 kolom pada browser dengan ukuran kecil. Untuk itu kita bisa mengatur ukuran col dengan menambahkan breakpoint.

Kita tambahkan div baru dengan kelas row. Kali ini kita tambankan kelas mt-3 untuk memberikan margin di bagian atas agar baris kita yang responsive ini terpisah dari baris-baris sebelumnya.

Setelah itu kita buat div baru dengan attribute class. Nah, kita mulai dari yang paling kecil dahulu ya. Untuk device berukuran kecil maka kolom kita berukuran satu baris penuh, artinya lebarnya adalah 12 unit. Jadi kita tambahkan kelas col-12. Setelah itu pada device berukuran medium atau menengah, kolom berukuran separuh baris, artinya separuh dari 12 ya, yaitu 6. Kita bisa tambahkan lagi kelas col dengan breakpoint medium berukuran 6, maka nama kelasnya adalah col-md-6. Dan kemudian untuk device dengan ukuran besar, breakpoint yang kita gunakan disini adalah Extra Large atau xl. Ukuran unitnya adalah 12 dibagi 4, yaitu 3. Maka kita tambahkan nama kelasnya col-xl-3. Kita tambahkan kelas warna bg-primary. Lalu untuk kontennya kita tulis Responsive 1.

Sekarang kita copy div kolom ini dan kita paste sebanyak 3 kali. Kita ubah warna backgroundnya menjadi secondary, danger dan success. Lalu kita ubah juga kontennya menjadi Responsive 2, 3 dan 4.

Kita simpan dan refresh browser. Perhatikan sekarang kita memiliki baris baru dengan konten bersifat responsive. Pada saat browser berukuran paling kecil, maka setiap baris hanya mengandung satu kolom. Dan bila diperbesar hingga memasuki breakpoint medium, maka setiap baris mengandung dua kolom. Dan bila kita perbesar lagi hingga breakpoint extra large, maka setiap baris mengandung empat kolom.

Apa itu sistem grid pada bootstrap?

Ada berapakah jumlah grid system pada bootstrap?

Apa fungsi XS di dalam grid?