Pernah lihat website yang tampilannya rapi, tombolnya keren, dan responsif di HP, tapi kodenya simpel? Kemungkinan besar website itu pakai Bootstrap. Ini adalah "jalan pintas" favorit web developer untuk mendesain website tanpa pusing mikirin CSS dari nol.
1. Apa itu Bootstrap?
Bayangkan Bootstrap itu seperti "Rakitan Lego" untuk website. Kamu tidak perlu mencetak plastiknya sendiri (nulis CSS dasar), kamu tinggal ambil balok-balok yang sudah jadi (Komponen) dan susun sesuai keinginan.
Bootstrap menyediakan kumpulan kode CSS dan JavaScript siap pakai untuk membuat tombol, navigasi, form, hingga layout grid yang responsif.
2. Cara Pasang (Instalasi)
Cara paling cepat adalah menggunakan CDN (Content Delivery Network). Kamu hanya perlu copy-paste link ini ke dalam file HTML kamu.
Langkah 1: Buat file index.html standar.
Langkah 2: Masukkan link CSS ini di dalam tag <head>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
Langkah 3: Masukkan link JS ini sebelum penutup tag </body> (untuk fitur interaktif seperti dropdown/modal):
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
3. Contoh Penggunaan: Tombol Keren
Kalau di HTML biasa tombol terlihat membosankan, di Bootstrap kamu tinggal tambah class btn dan warna yang diinginkan.
Kode:
<button class="btn btn-primary">Tombol Utama</button> <button class="btn btn-danger">Tombol Bahaya</button> <button class="btn btn-outline-success">Tombol Outline</button>Hasil Live:
4. Membuat Layout Grid (Kolom)
Ini fitur paling powerful! Bootstrap membagi layar menjadi 12 kolom. Kamu bisa mengatur lebar elemen dengan mudah.
Kode:
<div class="row"> <div class="col-md-6">Kiri (Setengah Layar)</div> <div class="col-md-6">Kanan (Setengah Layar)</div> </div>Hasil Live:
5. Komponen Card (Kartu)
Membuat kotak konten gambar dan teks seperti di Instagram atau Tokopedia sangat mudah dengan komponen Card.
Kode:
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Kartu</h5>
<p class="card-text">Isi deskripsi singkat.</p>
<a href="#" class="btn btn-primary">Klik Saya</a>
</div>
</div>
Hasil Live:
Kesimpulan
Bootstrap mempercepat proses pembuatan website hingga 3x lipat. Kamu tidak perlu memikirkan CSS rumit untuk membuat website responsif. Cukup hafal nama-nama class-nya (seperti btn, row, col, card), dan website keren siap meluncur!