Pengenalan HTML 14
Perbedaan CSS Sendiri dengan Bootstrap

oleh: Suryo Adhy Chandra, ST

Kita sudah belajar cara membuat class CSS sendiri dan juga sudah pernah menggunakan Bootstrap. Tapi mungkin kamu bertanya-tanya — kapan harus pakai CSS sendiri, kapan pakai Bootstrap? Yuk kita bahas perbedaannya secara lengkap!

Apa itu Bootstrap?

Bootstrap adalah kumpulan class CSS yang sudah dibuat terlebih dahulu oleh orang lain dan bisa kita gunakan langsung. Kita tinggal menambahkan nama class-nya ke elemen HTML, dan tampilannya langsung berubah — tanpa perlu menulis CSS sendiri.

<!-- Menggunakan Bootstrap — tinggal pakai class yang sudah ada --> <button class="btn btn-primary">Tombol Bootstrap</button> <div class="alert alert-danger">Pesan error!</div> <p class="text-center fw-bold text-success">Teks Hijau Tebal Tengah</p>

Hasilnya langsung rapi tanpa nulis CSS apapun:

Pesan error!

Teks Hijau Tebal Tengah

Perbedaan Utama

Aspek CSS Sendiri Bootstrap
Cara menulis Buat class sendiri di <style> Pakai class yang sudah disediakan Bootstrap
Kecepatan Lebih lambat — harus tulis semuanya sendiri Lebih cepat — tinggal pakai class yang ada
Kebebasan desain Bebas sepenuhnya — bisa apa saja Terbatas pada tampilan yang disediakan Bootstrap
Ukuran file Ringan — hanya ada style yang kita tulis Lebih berat — harus muat seluruh file Bootstrap
Kesulitan Butuh pemahaman CSS lebih dalam Mudah — cukup hafal nama class-nya
Kustomisasi Sangat mudah diubah sesuai keinginan Perlu usaha lebih untuk mengubah tampilan default

Contoh Perbandingan Langsung

Mari kita buat hal yang sama — sebuah kartu artikel — menggunakan dua cara:

Cara 1: CSS Sendiri CSS

<style> .kartu-saya { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 16px; } .judul-kartu { font-size: 1.1rem; font-weight: 700; color: #1e3a8a; margin-bottom: 6px; } .isi-kartu { color: #374151; font-size: 0.9rem; line-height: 1.6; } .tombol-saya { background: #3b82f6; color: white; border: none; padding: 8px 18px; border-radius: 6px; margin-top: 10px; cursor: pointer; } </style> <div class="kartu-saya"> <p class="judul-kartu">Judul Artikel</p> <p class="isi-kartu">Ini adalah isi artikel yang dibuat menggunakan CSS sendiri.</p> <button class="tombol-saya">Baca Selengkapnya</button> </div>

Hasil:

Judul Artikel

Ini adalah isi artikel yang dibuat menggunakan CSS sendiri.

Cara 2: Bootstrap Bootstrap

<!-- Tidak perlu <style> apapun! --> <div class="card p-3 mb-3 shadow-sm"> <p class="h6 fw-bold text-primary mb-1">Judul Artikel</p> <p class="text-secondary small">Ini adalah isi artikel yang dibuat menggunakan Bootstrap.</p> <button class="btn btn-primary btn-sm mt-1">Baca Selengkapnya</button> </div>

Hasil:

Judul Artikel

Ini adalah isi artikel yang dibuat menggunakan Bootstrap.

Kedua cara menghasilkan tampilan yang mirip. Dengan CSS sendiri kita punya kontrol penuh, dengan Bootstrap kita bisa lebih cepat. Keduanya sama-sama valid!

Kapan Pakai CSS Sendiri? Kapan Pakai Bootstrap?

CSS Sendiri Cocok untuk:

  • Desain yang unik dan khusus sesuai keinginan
  • Website yang ingin tampil berbeda dari yang lain
  • Belajar memahami CSS secara mendalam
  • Project kecil yang tidak butuh banyak komponen
  • Ketika ukuran file harus sekecil mungkin

Bootstrap Cocok untuk:

  • Membangun website dengan cepat
  • Tidak ingin terlalu banyak menulis CSS
  • Butuh komponen siap pakai (navbar, modal, tabel)
  • Website yang perlu tampil rapi di semua perangkat (responsive)
  • Bekerja dalam tim dengan standar yang sama

Menggabungkan CSS Sendiri dengan Bootstrap Kombinasi

Dalam praktik nyata, kita sering menggabungkan keduanya. Pakai Bootstrap untuk komponen umum, lalu tambahkan CSS sendiri untuk sentuhan khusus yang tidak ada di Bootstrap.

<style> /* CSS sendiri untuk tampilan khusus */ .kartu-khusus { border-left: 4px solid #f59e0b; /* border kiri kuning — tidak ada di Bootstrap */ background: #fffbeb; border-radius: 0 8px 8px 0; } </style> <!-- Kombinasi: Bootstrap untuk padding/shadow, CSS sendiri untuk warna khusus --> <div class="kartu-khusus p-3 shadow-sm mb-3"> <p class="fw-bold mb-1">Pengumuman Penting!</p> <p class="text-muted small mb-0">Jangan lupa kerjakan tugas sebelum deadline.</p> </div>

Hasil kombinasi:

Pengumuman Penting!

Jangan lupa kerjakan tugas sebelum deadline.

Kesimpulan:
  • Bootstrap = class CSS siap pakai, cepat tapi kurang fleksibel
  • CSS Sendiri = tulis sendiri, lebih lambat tapi bebas sepenuhnya
  • Keduanya bisa digabungkan — pakai Bootstrap untuk fondasi, CSS sendiri untuk detail khusus
  • Tidak ada yang lebih baik atau buruk — pilih sesuai kebutuhan project
← Kembali Ke Daftar Pelajaran HTML