Layout dengan flex di Bootstrap

 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.


Contoh :


1. Flex

Dalam Bootstrap, d-flex adalah sebuah kelas (class) yang digunakan untuk membuat elemen HTML menjadi fleksibel dengan menggunakan teknologi Flexbox CSS.

Berikut beberapa fungsi dan penggunaan dari d-flex:

Fungsi

1. Membuat elemen menjadi kontainer fleksibel.
2. Mengatur layout anak elemen secara horizontal atau vertikal.
3. Mengatur ukuran dan posisi anak elemen.
4. Membuat elemen responsif terhadap perubahan ukuran layar.

Penggunaan

1. Tambahkan d-flex pada elemen kontainer (seperti div).
2. Gunakan flex-direction untuk mengatur arah anak elemen (horizontal/vertikal).
3. Gunakan justify-content untuk mengatur posisi anak elemen (rata kiri/kanan/tengah).
4. Gunakan align-items untuk mengatur posisi vertikal anak elemen.

Contoh :

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muhammad Fahmi 'Ainunnajib - Bootstrap Flex</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css
/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9
     OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <h1>Bootstrap Flex</h1>

    <div class="d-flex bg-danger p-2 m-2">
        <div class="bg-success">Muhammad</div>
        <div class="bg-primary">Fahmi</div>
        <div class="bg-info">'Ainunnajib</div>
        <div class="bg-secondary">Universitas Safin Pati</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js
/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESa
AA55NDzOxhy9GkcIdslK1eN7N6jIeHz"crossorigin="anonymous"></script>
</body>

</html>


Hasil : 




2. Row Direction

Dalam Bootstrap dan Flexbox, "row direction" mengacu pada pengaturan arah anak elemen dalam kontainer fleksibel. Berikut beberapa kelas Bootstrap untuk mengatur arah anak elemen:

Arah Horizontal (Row)

1. flex-row (default): Anak elemen berjajar secara horizontal dari kiri ke kanan.
2. flex-row-reverse: Anak elemen berjajar secara horizontal dari kanan ke kiri.


Contoh : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muhammad Fahmi 'Ainunnajib - Bootstrap Row Direction</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/
     bootstrap.min.css" rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+AL
     EwIH" crossorigin="anonymous">

</head>

<body>
    <h1>Row Direction</h1>

    <div class="d-flex flex-row mb-3">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-info">Flex item 2</div>
        <div class="p-2 bg-secondary">Flex item 3</div>
    </div>
    <div class="d-flex flex-row-reverse">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-info">Flex item 2</div>
        <div class="p-2 bg-secondary">Flex item 3</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/
        bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9G
        kcIdslK1eN7N6jIeHz" crossorigin="anonymous">
        </script>
</body>

</html>


Hasil : 





3. Column Direction 

Dalam Bootstrap dan Flexbox, "column" mengacu pada pengaturan anak elemen secara vertikal. Berikut beberapa kelas Bootstrap untuk mengatur kolom:

Class Kolom

1. flex-column: Anak elemen berjajar secara vertikal dari atas ke bawah.
2. flex-column-reverse: Anak elemen berjajar secara vertikal dari bawah ke atas.

Contoh : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muhammad Fahmi 'Ainunnajib - Bootstrap Column Direction</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/
    bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok
    6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <h1>Column Direction</h1>

    <div class="d-flex flex-column mb-3">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-info">Flex item 2</div>
        <div class="p-2 bg-secondary">Flex item 3</div>
    </div>
    <div class="d-flex flex-column-reverse">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-info">Flex item 2</div>
        <div class="p-2 bg-secondary">Flex item 3</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/
    bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55ND
    zOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>


Hasil : 




4. Justify Content

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 : 

Code : 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muhammad Fahmi 'Ainunnajib - Bootstrap Justify Content</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/
    bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5Wa
    RU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <h1>Justify Content</h1>

    <div class="d-flex justify-content-start">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-end">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-center">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-between">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-around">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-evenly">
        <div class="p-2 bg-primary">Flex item 1</div>
        <div class="p-2 bg-secondary">Flex item 2</div>
        <div class="p-2 bg-info">Flex item 3</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js
    /bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZ
    LESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>



Hasil :







Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM

Gambar
Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM Membuat Simulasi Jaringan Komputer 2 Mikrotik, dengan VM 1. Membuat 2 mikrotik 2. Setting network di mikrotik 1 3. Setting network di mikrotik 2 4. Jalankan mikrotik 1 lalu ubah nama mikrotiknya  5. Setting interface-nya 6. Tambah IP address lalu ping default getway 7. Setting IP route lalu ping 8.8.8.8 8. Setting IP dns lalu ping website/domain 9. Tambah ip address untuk ethernet 2   10. Pindah ke mikrotik 2 lalu ubah nama mikrotik 2 11. Setting interface   12. Setting IP address lalu ping default getway  13. Setting IP route, dan IP dns lalu coba ping ke 8.8.8.8 dan masih gagal karena di mikrotik 1 belum di setting IP firewall nat 14. Setting IP firewall nat di mikrotik 1 15. Lalu kembali ke mikrotik 2 lalu ping ke 8.8.8.8 dan ke domain atau web 
Baca selengkapnya

Konfigurasi 3 Mikrotik

Gambar
Konfigurasi 3 Mikrotik 1. Siapkan Mikrotik 2. Ubah Settingan network di 3 Mikrotik 3. Setting di mikrotik 1, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke detik.com 4. Setting IP address di mikrotik1 untuk ke mikrotik lainnya dan juga setting ip firewall nat 5. Setting di mikrotik 2, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com 6. Setting di mikrotik 3, yaitu dari sytem identity, lalu interface, ip address, ip route dan ip dns, dan juga ping di default gateway, ping ke 8.8.8.8 lalu ke google.com catatan : Mohon maaf tidak sesuai dengan topologi, karena jika saya menggunakan ip 192.168.10.1/30 dan 192.168.10.6/30 di mikrotik 2 dan 3 nya timeout, jadi saya ubah ke ip 192.168.43.1/30 dan 192.168.43.6/30
Baca selengkapnya

Form HTML

Gambar
 Form HTML Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form atau formulir pada halaman Web. Jenis-Jenis atau Type Input pada Form  <input type="text"> : yang berfungsi untuk input teks bari tunggal <input type="submit">  : yang berfungsi sebagai tombol <input type="email">  : yang berfungsi sebagai tempat input email <input type="color">  : yang berfungsi sebagai tempat input color atau warna <input type="datetime">  : yang berfungsi sebagai tempat input tanggal dan waktu/jam <input type="time">  : yang berfungsi sebagai tempat input waktu atau jam <input type="file">  : yang berfungsi sebagai tempat input / upload file <input type="email">  : yang berfungsi sebagai tempat input email <input type="hidden">  : yang berfungsi sebagai tempat input yang tidak terlihat oleh user <input type="number">  : ...
Baca selengkapnya