Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak class siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol.
1. Mengenal CSS Framework
CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat pengembangan web. Framework seperti Bootstrap menyediakan struktur CSS dasar, komponen, dan sistem grid yang telah diatur, sehingga pengembang bisa fokus pada konten dan desain. Selain Bootstrap, ada juga framework lain seperti Bulma, Foundation, dan Tailwind CSS.
Keuntungan menggunakan CSS Framework:
- Hemat waktu karena banyak class dan komponen sudah disediakan.
- Desain responsif sudah terintegrasi, sehingga halaman mudah diakses dari berbagai ukuran layar.
- Memiliki konsistensi desain dan standar tata letak yang baik.
2. Mengenal Grid System
Grid System pada Bootstrap adalah sistem layout berbasis grid yang memungkinkan kita untuk membagi layar menjadi kolom-kolom. Dengan grid system ini, tata letak elemen bisa dengan mudah disesuaikan untuk berbagai ukuran layar, seperti desktop, tablet, dan ponsel.
Pada Bootstrap, layar dibagi menjadi 12 kolom dan kita bisa mengatur lebar kolom dengan class seperti col-1, col-6, col-lg-4, dll., tergantung pada ukuran layar yang ditargetkan.
Contoh Grid System:
<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>
Grid System ini membuat elemen tetap responsif secara otomatis pada berbagai ukuran layar (small, medium, large, dan extra-large).
3. Menggunakan Bootstrap Versi Offline
Untuk menggunakan Bootstrap secara offline, kita perlu mengunduh file CSS dan JavaScript Bootstrap.
Cara menggunakan Bootstrap versi offline:
- Unduh Bootstrap dari situs resmi https://getbootstrap.com.
- Ekstrak file zip yang diunduh dan letakkan file CSS dan JavaScript ke dalam folder proyek Anda.
- Tambahkan file CSS dan JavaScript tersebut ke HTML Anda menggunakan tag
<link>dan<script><link rel="stylesheet" href="path/to/bootstrap.min.css"><script src="path/to/bootstrap.bundle.min.js"></script>
Dengan Bootstrap versi offline, kita bisa mengembangkan halaman tanpa koneksi internet, namun tetap bisa memanfaatkan semua fitur Bootstrap.
🔵 TAHAP 4 – HTML + Bootstrap (Website Modern & Responsif)
Di tahap ini kita belajar bahwa:
“Bootstrap adalah kumpulan CSS siap pakai
yang membuat website langsung rapi, modern, dan responsif
tanpa harus menulis CSS dari nol.”
Dengan Bootstrap:
- Tampilan otomatis lebih bagus
- Layout rapi di HP, tablet, dan laptop
- Kita fokus ke struktur, bukan ribet di desain
🔵 Langkah 1 – Menambahkan Bootstrap ke HTML
Buka index.html, lalu di dalam <head> tambahkan:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
Dan sebelum </body> tambahkan:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
Penjelasan :
“Bootstrap tidak perlu di-install.
Kita cukup memanggilnya dari internet menggunakan CDN.”
🔵 Langkah 2 – Mengubah Header Menjadi Navbar Bootstrap
Ganti bagian <header> menjadi:
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Toko Online SMK</a>
<div>
<a class="nav-link d-inline text-white" href="#home">Home</a>
<a class="nav-link d-inline text-white" href="#produk">Produk</a>
<a class="nav-link d-inline text-white" href="#kontak">Kontak</a>
</div>
<span class="text-white">
Keranjang: <span id="cart">0</span>
</span>
</div>
</nav>Penjelasan sederhana:
navbar→ komponen menu Bootstrapbg-primary→ warna birucontainer→ memberi batas rapi di tengah
Tanpa CSS tambahan, navbar sudah terlihat profesional.
🔵 Langkah 3 – Membungkus Konten dengan Container
Agar konten rapi, bungkus semua <section> dengan:
<div class="container mt-4">
<!-- semua section di dalam sini -->
</div>
container = membuat halaman tidak menempel ke tepi layarmt-4 = margin top (jarak atas)
🔵 Langkah 4 – Mengubah Produk Menjadi Card Bootstrap
Ubah bagian produk menjadi seperti ini:
<section id="produk">
<h2 class="mb-3">Produk Kami</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-3">
<img src="https://images.unsplash.com/photo-1520975916090-3105956dac38" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">Kaos Polos</h5>
<p class="card-text">Rp 50.000</p>
<button class="btn btn-warning" onclick="beliProduk('Kaos Polos')">Beli</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img src="https://images.unsplash.com/photo-1528701800489-20be3c1ea3e6" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">Sepatu Sneakers</h5>
<p class="card-text">Rp 150.000</p>
<button class="btn btn-warning" onclick="beliProduk('Sepatu Sneakers')">Beli</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<img src="https://images.unsplash.com/photo-1585386959984-a4155228c6d4" class="card-img-top">
<div class="card-body text-center">
<h5 class="card-title">Tas Ransel</h5>
<p class="card-text">Rp 120.000</p>
<button class="btn btn-warning" onclick="beliProduk('Tas Ransel')">Beli</button>
</div>
</div>
</div>
</div>
</section>
Penjelasan sederhana:
| Class Bootstrap | Fungsi |
|---|---|
row | Baris layout |
col-md-4 | Kolom (3 produk sejajar) |
card | Kotak produk |
btn btn-warning | Tombol siap pakai |
Tanpa CSS tambahan, produk langsung rapi dan sejajar.
🔵 Langkah 5 – Mempercantik Form dengan Bootstrap
Ubah form menjadi:
<section id="kontak" class="mt-4">
<h2>Hubungi Kami</h2>
<form class="w-50">
<div class="mb-3">
<label class="form-label">Nama</label>
<input type="text" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">Pesan</label>
<textarea class="form-control" rows="4"></textarea>
</div>
<button class="btn btn-primary">Kirim</button>
</form>
</section>
Sekarang form terlihat seperti website profesional.
🔵 Pendalaman Bootstrap & Grid System
“Bootstrap adalah kumpulan alat siap pakai untuk membuat website rapi,
modern, dan otomatis menyesuaikan ukuran layar (HP, tablet, laptop).”
Konsep terpenting dalam Bootstrap adalah Grid System.
Grid System bekerja seperti kotak-kotak pembagi halaman:
Container
└── Row
├── Col
├── Col
└── Col
Artinya:
container→ pembungkus utama halamanrow→ bariscol→ kolom di dalam baris
Dengan pola ini, kita bisa membagi layar menjadi beberapa bagian secara rapi.
Contoh Struktur Dasar Bootstrap
<div class="container">
<div class="row">
<div class="col">Kolom 1</div>
<div class="col">Kolom 2</div>
<div class="col">Kolom 3</div>
</div>
</div>
Penjelasan sederhana:
container→ membuat konten berada di tengah dan tidak menempel layarrow→ satu bariscol→ kolom yang akan dibagi rata otomatis
Hasilnya:
- Layar dibagi menjadi 3 bagian sejajar
- Di HP, kolom bisa turun ke bawah otomatis
- Di laptop, kolom berjajar ke samping
Inilah yang disebut responsif.
Mengatur Jumlah Kolom
Bootstrap membagi layar menjadi 12 bagian.
Contoh:
<div class="row">
<div class="col-md-4">Produk 1</div>
<div class="col-md-4">Produk 2</div>
<div class="col-md-4">Produk 3</div>
</div>
Karena:
4 + 4 + 4 = 12
Maka akan muncul 3 kolom sejajar di layar besar.
Di layar kecil (HP), kolom akan otomatis turun ke bawah.
Penjelasan:
“Kita tidak perlu menghitung lebar pakai persen.
Bootstrap sudah mengaturnya untuk kita.”
Berikut kode HTML lengkap yang sudah memanggil CSS dan JavaScript Bootstrap melalui CDN, sekaligus memperlihatkan struktur dasar container → row → col.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Bootstrap Dasar</title>
<!-- CSS Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<!-- Navbar Bootstrap -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Toko Online SMK</a>
</div>
</nav>
<!-- Konten Utama -->
<div class="container mt-4">
<h2>Contoh Grid System</h2>
<div class="row">
<div class="col-md-4">
<div class="p-3 border text-center">Kolom 1</div>
</div>
<div class="col-md-4">
<div class="p-3 border text-center">Kolom 2</div>
</div>
<div class="col-md-4">
<div class="p-3 border text-center">Kolom 3</div>
</div>
</div>
</div>
<!-- JavaScript Bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Penjelasan singkat untuk siswa:
- Baris ini memanggil CSS Bootstrap:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - Baris ini memanggil JavaScript Bootstrap:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> - Struktur utama Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-4">...</div>
</div></div>
