Materi 3: Bootstrap

Materi 3: Bootstrap Framework

Bootstrap adalah framework CSS + JavaScript paling populer di dunia. Isinya ratusan class siap pakai buat bikin website responsif tanpa nulis CSS panjang.

1. Pengertian Bootstrap

Bootstrap adalah framework CSS + JavaScript paling populer di dunia. Isinya ratusan class siap pakai buat bikin website responsif tanpa nulis CSS panjang.

Keunggulan: Hemat waktu, tampilan rapi, otomatis support HP + Tablet + Laptop

2. Grid System 12 Kolom

Bootstrap bagi 1 baris jadi 12 kolom. Jumlah `col` dalam 1 `row` harus 12.

col-md-3

Coba kecilin ukuran browser kamu. Di HP 4 kolom ini otomatis numpuk jadi 1 ke bawah. Namanya "responsif".

3. Component Bootstrap

Button:

Card:

Contoh Card Bootstrap

Card ini udah rapi, ada shadow, padding, border otomatis. Tinggal isi konten kamu.

Klik Disini

4. Utility Class Wajib Hafal

mt-3 = margin-top jarak 3
p-4 = padding 4
text-center = teks rata tengah
d-flex = aktifkan flexbox
bg-primary = background biru Bootstrap

Catatan Penting: Jangan lupa pasang JS Bootstrap sebelum `` biar navbar, modal, dll bisa jalan.