Bootstrap

02 Jun 2025 -

Berikut adalah materi lengkap tentang Bootstrap :

📚 Bootstrap

Bootstrap adalah framework CSS paling populer yang digunakan untuk membangun tampilan website modern dan responsif dengan cepat. Dikembangkan oleh tim Twitter, Bootstrap menyediakan berbagai komponen siap pakai seperti tombol, form, navbar, grid, dan lainnya.

🧰 Kelebihan Bootstrap

- ✅ Responsif di semua ukuran layar (mobile-first)

- ✅ Hemat waktu karena komponen sudah tersedia

- ✅ Dokumentasi lengkap & komunitas luas

- ✅ Mendukung customisasi dengan class bawaan

📦 Cara Menggunakan Bootstrap

🔗 1. Menggunakan CDN (Online)

Tambahkan baris ini di dalam <head> file HTML:

<!-- Bootstrap 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

💾 2. Unduh File Manual

* Kunjungi [getbootstrap.com](https://getbootstrap.com)

* Klik “Download”

* Hubungkan file CSS & JS ke dokumen HTML

🧱 Struktur Grid Sistem (Layout)

Bootstrap menggunakan sistem grid 12 kolom. Contoh penggunaan:

<div class="container">
  <div class="row">
    <div class="col-4">Kolom 1</div>
    <div class="col-4">Kolom 2</div>
    <div class="col-4">Kolom 3</div>
  </div>
</div>

📌 *Gunakan `.container` untuk membungkus konten, dan `.row` sebagai baris sebelum `.col-*`.*

🧩 Komponen Dasar Bootstrap

1. 🔘 Tombol

<button class="btn btn-primary">Tombol Biru</button>
<button class="btn btn-success">Tombol Hijau</button>
<button class="btn btn-danger">Hapus</button>

2. 📥 Formulir

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <button type="submit" class="btn btn-primary">Kirim</button>
</form>

3. 📌 Alert

<div class="alert alert-warning" role="alert">
  Ini adalah peringatan!
</div>

📱 Responsivitas

Gunakan class untuk mengatur tampilan berdasarkan ukuran layar:

* `d-none d-md-block`: Elemen hanya tampil di layar **medium ke atas**

* `col-sm-6 col-md-4`: Ukuran kolom **berubah sesuai lebar layar**

🎯 Tips Styling Cepat

Berikut adalah class-class utility yang sering digunakan:

* `text-center`: Teks rata tengah

* `mt-3`, `mb-2`: Margin atas 3, margin bawah 2

* `bg-primary`: Latar belakang biru

* `text-white`: Teks berwarna putih

* `rounded`: Sudut elemen melengkung

🔚 Kesimpulan

Dengan Bootstrap, kamu bisa membuat tampilan website yang rapi, modern, dan profesional tanpa harus menulis CSS dari nol. Cukup pahami:

* Grid System

* Komponen Dasar

* Class Utility

Maka proses pengembangan website akan jauh lebih cepat dan efisien!

```