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

Kita akan membuat sebuah grid. Seperti yang telah kita pelajari pada video sebelumnya. Untuk membuat grid, kita memerlukan 3 buah kelas, yaitu container, row dan col. Pertama kita mulai dari kelas container terlebih dahulu. Kita tambahkan div dengan class=container. Lalu kita pindahkan judul Flex Utility ke dalam container. Lalu kita tambahkan lagi div dengan class=row.

Dan yang terakhir, kita buat div dengan kelas col. Misalkan kita menggunakan lebar 3 unit. Nama kelasnya menjadi col-3. Kita beri warna latar belakang primary dengan menggunakan kelas bg-primary. Dan untuk kontennya pertama kita berikan judul 1, dan kemudian kita isikan dengan lorem ipsum sebanyak 20 kata.

Kita copy div col. Lalu kita paste sebanyak 2 kali. Yang kedua kita ubah nama kelas backgroundnya menjadi bg-danger. Kita ubah judulnya menjadi 2 dan kita tambahkan kontennya dengan lorem 40 kata. Sedangkan yang ketiga kita ubah nama kelas backgroundnya menjadi bg-success, kita ubah judulnya menjadi 3 dan kita tambahkan kontennya sebanyak 20 kata.

Kita simpan dan refresh browser. Sekarang kita sudah memiliki sebuah grid dengan 3 kolom. Masing-masing kolom menggunakan ¼ lebar baris, dan pada bagian paling kanan masih terdapat ruang kosong sebesar ¼ baris. Mungkin agar lebih jelas, kita bisa tambahkan warna latar belakang pada judulnya, kita tambahkan kelas bg-info. Nah, sekarang kita sudah bisa melihat lebar keseluruhan dari container kita. Dan pada grid, masih ada ruang kosong sebesar seperempatnya.

Kalau kita klik kanan, dan kita pilih Inspect. Kemudian kita pilih ke kelas Row. Disini bisa kita lihat ada properti display dengan nilai flex. Sejak versi 4, Bootstrap dibangun menggunakan Flexbox. Oleh karena itu kita bisa menggunakan properti-properti yang berhubungan dengan Flexbox. Dan yang lebih enaknya lagi, Bootstrap sudah menyediakan kelas-kelas yang tinggal kita pakai. Jadi kita sudah tidak perlu menuliskan kode CSS sendiri.

Yang pertama kita bahas disini adalah properti untuk mengubah arah Main Axis dari Flexbox. Bagi yang sudah pernah belajar Flexbox tentunya sudah tau ya, bahwa arah Main Axis secara default adalah dari kiri ke kanan. Makanya kalau kita lihat disini, ketiga kolum kita disusun dari kolom pertama berada di sebelah kiri, kemudian kolom kedua berada di tengah, sedangkan kolom ketiga berada di kanan.

Kita bisa membalikkan arah penyusunan kolom ini dengan cara menambahkan kelas flex-row-reverse. Sebagai contoh kita tambahkan kelas flex-row-reverse di sebelah kelas row. Dan perhatikan sekarang bahwa kolom kita disusun dari kanan ke kiri.

Arah Main Axis juga bisa kita balikkan menjadi dari atas ke bawah, dengan menggunakan kelas flex-column. Dan kalau kita ingin agar arahnya dari bawah ke atas, kita bisa menggunakan kelas flex-column-reverse. Kita hapus kelas flex-colum-reverse agar Main Axis kembali ke arah default yaitu dari kiri ke kanan.

Selanjutnya kita akan membahas mengenai properti justify-content, yang berfungsi untuk mengatur pembagian sisa ruang pada Main Axis. Secara default, kelas yang kita gunakan adalah justify-content-start, yang berarti semua konten kita ditaruh di bagian awal Main Axis, yaitu di sebelah kiri. Semua sisa ruang berada di kanan.

Kita bisa mengganti nilai justify-content ini, misalkan menjadi kelas justify-content-end, dimana semua konten disusun di bagian akhir Main Axis, yaitu di sebelah kanan. Sisa ruang berada di sebelah kiri. Perhatikan bahwa walaupun konten berada di kanan, namun susunannya masih sesuai dengan urutan konten pada HTML, yaitu 123. Kalau kata justify-content-end saya ganti menjadi flex-row-reverse, walaupun konten sama-sama berada di kanan, namun susunannya adalah 321.

Kelas flex-row-reverse ini bisa kita gabungkan dengan justify-content-end. Artinya arah Main Axis kita balik mejadi dari kanan ke kiri. Dan konten kita susun di bagian akhir Main Axis, yaitu di sebelah kiri. Hasilnya konten menjadi rata kiri, namun isi kontennya adalah 321.

Kita hapus kelas flex-row-reverse dan justify-content-end dan sekarang kita kembali ke Main Axis default, yaitu dari kiri ke kanan. Ada beberapa nilai justify-content lagi yang bisa kita coba. Yang pertama adalah justify-content-center, yang menaruh konten di bagian tengah baris. Kemudian ada justify-content-between, dimana konten awal akan berada di ujung kiri baris, konten terakhir berada di ujung kanan baris, dan sisa ruang dibagi rata diantara semua konten. Lalu ada justify-content-around, dimana bagian tepi kiri dan kanan konten mendapatkan margin separuh, sementara bagian tengah konten mendapatkan margin penuh. Dan yang terakhir adalah justify-content-evenly, dimana sisa space dibagi rata di semua margin.

Oke, sampai disini mungkin teman-teman yang sudah pernah belajar flexbox merasa biasa saja ya, karena hal-hal seperti ini bisa dengan mudah kita lakukan dengan menuliskan CSS sendiri. Nah, sekarang saya akan menunjukkan hal yang luar biasanya. Semua kelas pada flexbox utility ini datang lengkap bersama breakpoints-nya. Kita sudah belajar bahwa Bootstrap 5 memiliki 6 buah break point, dimulai dari yang paling kecil hingga extra extra large. Jadi kita bisa mengatur agar kita menggunakan justify-content yang berbeda di setiap breakpoint-nya.

Sebagai contoh, misalkan pada ukuran browser paling kecil kita menggunakan justify-content-center. Kemudian pada saat memasuki ukuran kecil, kita ganti menjadi end, kita gunakan kelas justify-content-sm-end. Pada saat masuk ukuran medium, kita gunakan between, nama kelasnya adalah justify-content-md-between. Lalu misalnya large kembali ke start, justify-content-lg-start. Extra large menjadi evenly, justify-content-xl-evenly. Dan Extra Extra Large kembali ke center, justify-content-xxl-center.

Kita simpan dan refresh browser. Perhatikan pada saat saya mengubah ukuran browser. Sekarang kita menggunakan justify-content yang berbeda setiap kali browser kita mencapai breakpoint baru.

Kita hapus semua kelas justify-content. Kita lanjutkan pembahasan kita ke properti align-items. Properti ini digunakan untuk mengatur penggunaan ruang pada Cross Axis, dalam contoh kita adalah dari arah atas ke bawah. Nilai default yang digunakan adalah align-items-stretch. Kalau kita lihat di browser. Kita memiliki 3 buah kolom yang isinya berbeda. Kolom kedua isinya paling panjang. Namun kolom pertama dan ketiga secara otomatis memperpanjang backgroundnya sehingga ketiga kolom menjadi rapi sejajar.

Kita bisa mengganti nilainya misalkan menjadi align-items-start. Sekarang warna background dari masing-masing kolom hanya sebanyak kontennya saja. Dan ketiga konten disusun di bagian awal Cross Axis, yaitu di bagian atas. Kalau kita menggunakan align-items-end, maka konten disusun di bagian bawah. Sedangkan kalau kita menggunakan align-items-center, maka konten disusun di bagian tengah.

Ada satu lagi nilai yang khas, yaitu align-items-baseline. Kalau kita gunakan, seolah-olah hasilnya sama dengan align-items-start. Namun kalau misalkan tag h1 pada kolom pertama saya hilangkan. Nah, sekarang kolom pertama menjadi sedikit turun ke bawah ya. Karena baseline menyusun kolom berdasarkan konten pada baris pertamanya.

Kita kembalikan tag h1. Dan misalkan kita gunakan align-items-center. Kita bisa mengubah align dari salah satu kolom agar berbeda dari temannya. Misalkan kita ingin agar khusus kolom pertama berada di bawah. Maka kita bisa menggunakan kelas align-self-end. Kelas ini bisa kita tambahkan pada tag kolom pertama. Sekarang kolom pertama berada di bagian bawah, sedangkan kolom lainnya berada di tengah.

Kita hapus semua kelas align-items dan align-self. Sekarang kita bahas mengenai properti order. Properti ini bisa kita gunakan untuk mengubah posisi konten pada Main Axis. Sebagai contoh. Urutan konten kita sekarang adalah 123. Kita bisa memindahkan konten kedua ke sebelah kanan, sehingga urutannya menjadi 132. Caranya adalah kita bisa menambahkan kelas order-1 ke kolom kedua. Dan sekarang urutan konten kita adalah 132.

Selanjutnya kita bisa pindahkan lagi kolom pertama ke paling kanan, dengan menambahkan kelas order dengan nilai yang lebih besar dari 1. Nilai yang tersedia adalah 1 hingga 5. Semakin besar nilai order, maka posisinya akan semakin di kanan. Misalkan sekarang kita gunakan kelas order-2. Maka sekarang urutan konten kita adalah 321.

Sebagai alternatif, kita juga bisa menggunakan kelas order-first untuk menaruh konten pada bagian paling kiri. Dan kelas order-last untuk menaruh konten pada bagian paling kanan.

Kita hapus semua kelas order yang ada. Sekarang kita buat contoh penggunaan order bersama breakpoint. Misalkan pada kolom kedua. Pada saat ukuran browser menengah akan berpindah ke kiri. Kita tambahkan kelas order-md-first. Dan kemudian pada saat browser berukuran extra large akan berpindah ke kanan, kita tambahkan kelas order-xl-last.

Kita simpan dan refresh browser. Perhatikan pada saat browser berukuran paling kecil maka konten kita adalah 123. Pada saat ukuran menengah berubah menjadi 213. Dan pada saat ukuran extra large berubah lagi menjadi 132.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.