Layout dengan flex di Bootstrap

Bootstrap Flexbox (Bootstrap Flex atau Flexbox) adalah ekstensi dari framework Bootstrap yang menggunakan teknologi Flexbox CSS untuk memudahkan pengembangan layout responsif dan fleksibel.

Fitur Utama

1. Layout responsif: Menyesuaikan tata letak dengan ukuran layar.

2. Sistem grid: Membagi konten menjadi kolom dan baris.

3. Pengaturan ukuran dan posisi: Mengatur lebar, tinggi dan posisi elemen.

4. Pengaturan spasial: Mengatur jarak antar-elemen.

5. Dukungan untuk perangkat mobile.

Kelebihan

1. Desain responsif yang mudah.

2. Layout yang fleksibel.

3. Menghemat waktu pengembangan.

4. Kompatibilitas dengan browser modern.

5. Dokumentasi yang lengkap.

Berikut Contoh Penggunaan:

1. d-flex

2. Direction kolom

    Column direction adalah cara mengatur elemen fleksibel agar dirender secara vertikal menggunakan properti flex-direction: column. Elemen-elemen dalam kontainer akan ditumpuk dari atas ke bawah (atau sebaliknya, jika menggunakan opsi reverse).

Hasilnya :

3. Direction Row

    Dalam Bootstrap Flex, properti row direction mengacu pada pengaturan arah tata letak elemen dalam satu baris dengan menggunakan properti flex-direction. Properti ini digunakan untuk mengontrol bagaimana elemen-elemen fleksibel dirender secara horizontal atau vertikal.

4. JustifyContent

    Di Bootstrap dan Flexbox, "justify-content" digunakan untuk mengatur posisi horizontal anak elemen dalam kontainer fleksibel. Berikut beberapa kelas Bootstrap:

Kelas Justify Content

1. justify-content-start: Anak elemen rata kiri.

2. justify-content-end: Anak elemen rata kanan.

3. justify-content-center: Anak elemen rata tengah.

4. justify-content-between: Anak elemen berjarak sama.

5. justify-content-around: Anak elemen berjarak sama dengan spasi tambahan.

6. justify-content-evenly: Anak elemen berjarak sama dengan spasi yang sama.

Contoh : 

Hasilnya :