Bootstrap Flex

Bootstrap Flex adalah sebuah fitur yang sangat berguna dalam kerangka kerja Bootstrap untuk mengatur tata letak elemen-elemen dalam sebuah halaman web secara fleksibel dan responsif. Fitur ini menggunakan konsep CSS Flexbox yang memungkinkan kita untuk mengatur tata letak elemen-elemen dengan lebih mudah dan efisien, terutama untuk desain yang responsif (mampu menyesuaikan tampilan di berbagai ukuran layar).

Keunggulan Bootstrap Flex

• Responsivitas: Dengan Bootstrap Flex, kita bisa membuat layout yang secara otomatis menyesuaikan diri dengan ukuran layar perangkat yang berbeda, baik itu desktop, tablet, atau smartphone.
• Fleksibilitas: Kita bisa mengatur arah, ukuran, jarak, dan penjajaran elemen-elemen dengan sangat fleksibel, sesuai dengan kebutuhan desain kita.
• Kemudahan Penggunaan: Bootstrap menyediakan kelas-kelas CSS yang siap pakai untuk mengatur berbagai aspek tata letak, sehingga kita tidak perlu menuliskan banyak kode CSS secara manual.

Contoh Penggunaan Bootstrap Flex

Saya akan memberikan beberapa contoh penggunaan Bootstrap Flex, untuk contoh-contoh lainnya kamu bisa kunjungi website getbootstrap.com atau di w3schools.com.

Di dalam Bootstrap Flex sendiri memiliki kelas utama untuk mengaktifkan flexbox, yaitu:

• d-flex: Kelas ini adalah yang paling dasar untuk mengaktifkan Flexbox pada sebuah elemen. Dengan menambahkan kelas ini, elemen tersebut dan semua anak di dalamnya akan menjadi bagian dari sebuah flex container.

1. Mencoba Membuat Flex

Keterangan:

• div: Ini adalah tag HTML dasar yang digunakan untuk mendefinisikan sebuah divisi atau bagian dalam halaman.
• d-flex: Ini adalah kelas dari Bootstrap yang memberikan gaya khusus pada elemen div ini. Kelas "d-flex" mengaktifkan fitur Flexbox, yang memungkinkan kita untuk mengatur tata letak elemen-elemen di dalam div ini secara fleksibel.
• bg-warning: Ini adalah kelas dari Bootstrap yang memberikan warna latar belakang kuning pada div ini.
• p-2: Ini adalah kelas dari Bootstrap yang memberikan padding (jarak antara isi dengan tepi div).
• m-2: Ini adalah kelas dari Bootstrap yang memberikan margin (jarak antara div ini dengan elemen di sekitarnya).
• bg-primary, bg-success, bg-info, bg-secondary: Memiliki fungsi yang sama, hanya berbeda warna latar belakang dan teks yang ditampilkan.

Keterangan tambahan:

• bg-primary: Biasanya digunakan untuk elemen-elemen yang paling penting atau menjadi fokus utama. Warna yang digunakan umumnya adalah biru tua.
• bg-secondary: Digunakan untuk elemen-elemen yang memiliki prioritas kedua setelah elemen utama. Warnanya biasanya lebih lembut dari primary.
• bg-success: Menunjukkan keberhasilan atau status positif. Warnanya biasanya hijau.
• bg-danger: Menunjukkan bahaya, kesalahan, atau status negatif. Warnanya biasanya merah.
• bg-warning: Menunjukkan peringatan atau informasi penting yang perlu diperhatikan. Warnanya biasanya kuning.
• bg-info: Menunjukkan informasi tambahan atau petunjuk. Warnanya biasanya biru muda.
• bg-light: Memberikan latar belakang yang lebih terang.
• bg-dark: Memberikan latar belakang yang lebih gelap.

Hasil dari source code di atas:

2. Membuat Row Direction / Horizontal Direction

Row direction dalam Bootstrap Flex mengacu pada pengaturan di mana elemen-elemen dalam sebuah wadah (container) disusun secara horizontal, dari kiri ke kanan. Ini adalah pengaturan default dalam Flexbox. Untuk penulisannya sendiri kita bisa menggunakan kelas flex-row. Kelas ini ditambahkan ke elemen container yang ingin kita atur tata letaknya. Berikut contohnya:

Keterangan:

• d-flex: Ini adalah kelas Bootstrap yang mengaktifkan Flexbox pada elemen ini, memungkinkan kita untuk mengatur tata letak item-item di dalamnya secara fleksibel.
• flex-row: Ini adalah kelas Bootstrap yang secara khusus mengatur arah utama dari item-item flex menjadi horizontal (row).
• mb-3: Ini adalah kelas Bootstrap yang memberikan margin bawah.
• p-2: Ini adalah kelas Bootstrap yang memberikan padding di semua sisinya.
• flex-row-reverse: Ini adalah kelas Bootstrap yang mengatur arah utama menjadi horizontal, tetapi membalik urutan item-item, sehingga mereka akan disusun dari kanan ke kiri.
• bg-secondary, bg-primary, bg-success: Memiliki fungsi yang sama, hanya berbeda warna latar belakang dan teks yang ditampilkan.

Hasilnya:

3. Membuat Column Direction / Vertical Direction

Column direction dalam konteks Bootstrap Flex berarti kita mengatur elemen-elemen dalam sebuah wadah (container) untuk disusun secara vertikal, dari atas ke bawah. Ini adalah kebalikan dari row direction yang menyusun elemen secara horizontal. Untuk penulisannya sendiri kita bisa menggunakan kelas flex-column. Kelas ini ditambahkan ke elemen container yang ingin kita atur tata letaknya. Berikut contohnya:

Keterangan:

• d-flex: Ini adalah kelas Bootstrap yang mengaktifkan Flexbox pada elemen ini, memungkinkan kita untuk mengatur tata letak item-item di dalamnya secara fleksibel.
• flex-column: Ini adalah kelas Bootstrap yang secara khusus mengatur arah utama dari item-item flex menjadi vertikal (column), sehingga elemen-elemen akan disusun dari atas ke bawah.
• mb-3: Ini adalah kelas Bootstrap yang memberikan margin bawah.
• p-2: Ini adalah kelas Bootstrap yang memberikan padding di semua sisinya.
• flex-column-reverse: Ini adalah kelas Bootstrap yang mengatur arah utama menjadi vertikal, tetapi membalik urutan item-item, sehingga mereka akan disusun dari bawah ke atas.
• bg-secondary, bg-primary, bg-success: Memiliki fungsi yang sama, hanya berbeda warna latar belakang dan teks yang ditampilkan.

Hasilnya:

4. Membuat Justify Content

Justify-content adalah kelas utilitas dalam Bootstrap yang digunakan untuk mengatur penempatan atau penyelarasan item-item fleksibel di dalam sebuah wadah flex (container). Wadah flex ini memungkinkan kita untuk mengatur tata letak elemen-elemen di dalamnya secara fleksibel dan responsif.

Nilai-nilai justify-content:

• justify-content-start: Menyelaraskan item-item ke sisi awal (start) dari sumbu utama.
• justify-content-end: Menyelaraskan item-item ke sisi akhir (end) dari sumbu utama.
• justify-content-center: Menyelaraskan item-item ke tengah sumbu utama.
• justify-content-between: Mendistribusikan item-item secara merata di seluruh wadah, dengan ruang yang sama di antara setiap item.
• justify-content-around: Mendistribusikan item-item secara merata di seluruh wadah, dengan ruang yang sama di sekitar setiap item.
• justify-content-evenly: Mendistribusikan item-item secara merata di seluruh wadah, dengan ruang yang sama di antara setiap item dan juga di tepi wadah.

Berikut contohnya:

Hasilnya:

Kurang lebih seperti itulah beberapa beberapa contoh penggunaan Flex di Bootstrap. Untuk contoh selengkapnya kamu bisa kunjungi website getbootstrap.com atau website w3schools.com dan untuk source code bisa kamu dapatkan di akun Github saya elvanazlita. Selamat mencoba dan semoga membantu!