by Bootstrap adalah framework CSS paling populer yang memungkinkan Anda membuat tampilan web modern dan responsif dengan cepat, tanpa menulis banyak CSS. Artikel ini membahas cara menggunakan Bootstrap 5 untuk pemula.
Langkah 1: Memasang Bootstrap
Cara termudah lewat CDN. Tempel link CSS di dalam <head> dan JS sebelum </body>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Setelah ini, semua kelas Bootstrap siap dipakai.
Langkah 2: Sistem Grid (Kunci Responsif)
Bootstrap membagi halaman menjadi 12 kolom. Struktur dasarnya: container → row → col:
<div class="container">
<div class="row">
<div class="col-md-6">Kolom kiri</div>
<div class="col-md-6">Kolom kanan</div>
</div>
</div>
col-md-6 berarti “setengah lebar pada layar sedang ke atas”. Di ponsel, kolom otomatis menumpuk ke bawah — itulah responsif tanpa menulis media query.
Langkah 3: Komponen Siap Pakai
Bootstrap punya banyak komponen. Contoh tombol dan card:
<button class="btn btn-primary">Tombol Biru</button>
<button class="btn btn-success">Tombol Hijau</button>
<div class="card" style="width:18rem">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Isi konten card di sini.</p>
<a href="#" class="btn btn-primary">Baca</a>
</div>
</div>
Langkah 4: Navbar Responsif
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Situs Saya</a>
<div class="navbar-nav">
<a class="nav-link" href="#">Beranda</a>
<a class="nav-link" href="#">Kontak</a>
</div>
</div>
</nav>
Utility Class yang Sering Dipakai
| Kelas | Fungsi |
|---|---|
| text-center | Teks rata tengah |
| mt-3, p-4 | Margin/padding (spacing) |
| d-flex | Flexbox |
| bg-primary, text-white | Warna latar & teks |
Kesimpulan
Anda telah mengenal dasar Bootstrap 5: memasang lewat CDN, sistem grid, komponen siap pakai, dan utility class. Dengan Bootstrap, membuat tampilan rapi dan responsif jadi jauh lebih cepat. Langkah berikutnya, praktikkan membangun halaman lengkap yang responsif.
Referensi: untuk pendalaman, kunjungi dokumentasi resmi Bootstrap.
