by Website responsive menyesuaikan tampilannya secara otomatis di layar HP, tablet, maupun desktop. Bootstrap membuat ini sangat mudah. Artikel ini membahas cara membuat website responsive dengan Bootstrap 5.
Apa Itu Website Responsive?
Responsive berarti tata letak menyesuaikan ukuran layar: di desktop tampil berdampingan, di HP menumpuk ke bawah — tanpa perlu situs versi terpisah. Bootstrap mengaturnya lewat sistem grid dan breakpoint.
Langkah 1: Wajib Ada Meta Viewport
Tanpa baris ini, responsif tidak akan bekerja di HP:
<meta name="viewport" content="width=device-width, initial-scale=1">
Langkah 2: Grid dengan Breakpoint
Gunakan kombinasi kelas kolom untuk mengatur perilaku di tiap ukuran layar:
<div class="container">
<div class="row">
<div class="col-12 col-md-8">Konten utama</div>
<div class="col-12 col-md-4">Sidebar</div>
</div>
</div>
col-12 = penuh di HP (menumpuk); col-md-8 = 2/3 lebar di layar sedang ke atas (berdampingan). Inilah inti desain responsif.
| Kelas | Aktif pada |
|---|---|
| col-sm-* | ≥ 576px (HP besar) |
| col-md-* | ≥ 768px (tablet) |
| col-lg-* | ≥ 992px (desktop) |
Langkah 3: Navbar yang Menyusut di HP
Navbar dengan tombol “hamburger” otomatis di layar kecil:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<div class="navbar-nav">
<a class="nav-link" href="#">Beranda</a>
<a class="nav-link" href="#">Tentang</a>
</div>
</div>
</div>
</nav>
Langkah 4: Gambar Responsif
Tambahkan kelas img-fluid agar gambar mengecil mengikuti lebar layar:
<img src="foto.jpg" class="img-fluid" alt="Foto">
Langkah 5: Menguji
Uji dengan mengecilkan jendela browser, atau buka DevTools (F12) → ikon perangkat untuk mensimulasikan HP/tablet.
Kesimpulan
Membuat website responsive dengan Bootstrap 5 berpusat pada tiga hal: meta viewport, grid dengan breakpoint, dan komponen responsif seperti navbar collapse serta img-fluid. Dengan ini, situs Anda tampil rapi di semua perangkat tanpa menulis media query manual.
Referensi: untuk pendalaman, kunjungi dokumentasi resmi Bootstrap.
