Lanjutan_Bootstrap_Grid_Systems (part 1)
- 1. Bootstrap Grid System Membuat Layout Web yang Rapi dan Responsif Lanjutan Materi Bootstrap
- 2. Apa Itu Grid System? • • Fitur utama Bootstrap untuk membuat layout • • Menggunakan sistem 12 kolom • • Mempermudah pembagian halaman (row & column) • • Otomatis responsif di berbagai ukuran layar
- 3. Struktur Dasar Grid • <div class="container"> • <div class="row"> • <div class="col">Kolom 1</div> • <div class="col">Kolom 2</div> • </div> • </div>
- 4. Pembagian 12 Kolom • • Total 12 kolom per baris • • Bisa dibagi seperti: • - 6 + 6 • - 4 + 4 + 4 • - 3 + 3 + 3 + 3 • • Contoh: • <div class="col-4">Isi</div> • <div class="col-8">Isi</div>
- 5. Breakpoint Responsif • • Gunakan kelas seperti: • - col-sm-6 (≥576px) • - col-md-4 (≥768px) • - col-lg-3 (≥992px) • • Layout menyesuaikan ukuran layar
- 6. Contoh Grid Responsive • <div class="container"> • <div class="row"> • <div class="col-sm-6 col-md-4">Kolom 1</div> • <div class="col-sm-6 col-md-8">Kolom 2</div> • </div> • </div>
- 7. Tips Menggunakan Grid • • Gunakan <container> atau <container-fluid> • • Pastikan <row> selalu membungkus <col> • • Total kolom dalam satu <row> maksimal 12 • • Gunakan kombinasi col-sm, col-md, col-lg
- 8. Praktik Grid System • • Buat halaman dengan 3 kolom (4+4+4) • • Atur agar menjadi 1 kolom di layar kecil • • Gunakan class col-sm, col-md
- 9. Tanya Jawab • • Ada yang ingin ditanyakan? • • Yuk kita bahas bersama!