Kustomisasi Tema Bootstrap: Mengubah Tampilan Halaman Sesuai Kebutuhan

merasa tampilan website Bootstrap Anda terlihat “mirip semua” dengan situs lain? Tenang, Anda tidak sendirian. Banyak pemula menggunakan Bootstrap karena kemudahan dan kecepatannya, tetapi bingung saat ingin mengubah warna, font, atau gaya agar tampilannya lebih unik dan sesuai brand.

Masalahnya, mengedit tema Bootstrap tanpa memahami strukturnya sering membuat tampilan rusak atau tidak konsisten. Anda mungkin bertanya: “Harus edit file mana?”, “Apakah cukup pakai CSS tambahan?”, atau “Perlu SCSS?”

Artikel ini hadir untuk menjadi panduan lengkap bagi Anda. Di sini, Anda akan belajar:

• Dasar kustomisasi tema Bootstrap
• Cara mengubah warna, font, dan komponen
• Pilihan metode: Override CSS atau SCSS variables
• Tips aman agar desain tetap responsif dan rapi

Memahami Cara Kustomisasi Bootstrap

Ada dua metode utama dalam mengubah tema Bootstrap:

1. Override CSS (Cara cepat & sederhana)
2. Kustomisasi via SCSS Variables (Cara profesional & fleksibel)

1. Override CSS – Cara Termudah untuk Pemula

Metode ini cocok jika Anda hanya ingin mengubah warna atau font tanpa mengubah struktur Bootstrap.

Langkah-langkah:

1. Tambahkan file CSS Anda setelah file Bootstrap.
2. Tulis ulang gaya komponen sesuai kebutuhan.

Contoh Ubah Warna Tombol:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="custom.css">

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="custom.css">

/* custom.css */
.btn-primary {
  background-color: #ff5722;  /* Warna oranye */
  border-color: #ff5722;
}

/* custom.css */
.btn-primary {
  background-color: #ff5722;  /* Warna oranye */
  border-color: #ff5722;
}

Tips: Gunakan kelas Bootstrap yang ada, lalu override agar tidak perlu menulis ulang semuanya.

2. Kustomisasi Tema dengan SCSS – Cara Profesional

Jika Anda ingin mengganti warna tema global, font, spacing, gunakan SCSS (fitur resmi dari Bootstrap).

Langkah Kustomisasi SCSS Bootstrap

1. Install Bootstrap via npm npm install bootstrap
2. Buat file SCSS Anda // custom.scss $primary: #4caf50; // Ganti warna utama jadi hijau $font-family-base: 'Poppins', sans-serif; @import "node_modules/bootstrap/scss/bootstrap";
3. Compile SCSS ke CSS
   Gunakan Sass: sass custom.scss custom.css
4. Gunakan CSS hasil kompilasi <link rel="stylesheet" href="custom.css">

Keunggulan SCSS:

• Ubah seluruh tema hanya dengan 1 variable
• Tampilan konsisten di seluruh halaman
• Cocok untuk proyek besar & brand identity

3. Mengganti Font & Tipografi Global

Gunakan kombinasi CSS dan Google Fonts.

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

body {
  font-family: 'Poppins', sans-serif;
}

body {
  font-family: 'Poppins', sans-serif;
}

4. Mengubah Warna Tema Default Bootstrap

Daftar variable warna penting:

$primary:   #0d6efd;
$secondary: #6c757d;
$success:   #198754;
$danger:    #dc3545;
$warning:   #ffc107;
$info:      #0dcaf0;

$primary:   #0d6efd;
$secondary: #6c757d;
$success:   #198754;
$danger:    #dc3545;
$warning:   #ffc107;
$info:      #0dcaf0;

Cukup ubah nilai di atas untuk mendapat tema unik!

5. Menambah Style Dark Mode (Opsional)

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

Gunakan tombol toggle untuk UX yang lebih modern.

Anda telah memahami bagaimana cara mengubah tampilan Bootstrap menjadi lebih personal dan profesional. Mulai dari metode sederhana (override CSS) hingga cara lanjutan dengan SCSS variables. Dengan teknik ini, Anda tidak lagi terjebak pada tampilan default Bootstrap yang “itu-itu saja”.

Ingin melangkah lebih jauh?
Baca juga: Cara Membuat Dark Mode dengan Bootstrap 5 untuk pengalaman UI lebih modern.