Jika mau step-by-step langsungya, klik skip kebawah.

Bootstrap adalah framework CSS yang digunakan untuk membantu styling website sehingga responsif dalam waktu yang cepat. Bootstrap sendirinya sudah lengkap dengan kelas-kelas untuk menambahkan style ke website sehingga terlihat bagus. Tapi, karena popularitasnya, menggunakan Bootstrap standar dapat membuat website anda terlihat mirip dengan website lain dan tidak unik, apalagi jika menggunakan warna-warna yang sudah tersedia.

Untuk memanfaatkan fitur-fitur Bootstrap dalam membuat website responsif dan mengurangi waktu perkembangan sambil tetap membuat website anda terlihat unik, salah satu caranya adalah untuk kustomasi/mengubah dan menambahkan Bootstrap dengan menambahkan styling sendiri dan mengubah kelas-kelas yang sudah disediakan Bootstrap, misalnya dengan mengubah warna-warna default yang sudah ada di Bootstrap.

// Mengubah warna utama Bootstrap
$primary: #ca5ed1;

Ini merupakan contoh kustomasi Bootstrap, dimana kita mengubah warna primary dari biru (default) menjadi warna ungu. Dengan mengubah satu variabel ini saja kita dapat membedakan website kita dari website lain yang hanya menggunakan Bootstrap standar.

Tapi bagaimana cara memulai mengubah Bootstrap sehingga lebih sesuai dengan desain yang kita mau?

Cara Kustomasi Bootstrap

Inisialisasi NPM

Salah satu cara kustomasi Bootstrap adalah menggunakan npm. npm adalah package manager yang memudahkan mengunduh library yang berisi code yang diunggah oleh orang lain. Salah satu library ini adalah Bootstrap.

Jadi, untuk menggunakan npm untuk unduh Bootstrap, pertama buat folder proyek baru. Kemudian, inisialisasi npm dalam folder projek anda menggunakan (jangan lupa instalasi nodejs dulu):

npm init -y

Command ini akan menambahkan file package.json kedalam folder anda dan akan digunakan untuk tempat proyek anda menaruh ketergantungan yang akan diperlukan (seperti Bootstrap).

Unduh Bootstrap

Kemudian silahkan unduh library Bootstrapnya:

npm i bootstrap

Command ini akan mengunduh file yang dibutuhkan Bootstrap kedalam folder node_modules di folder root anda, jadi anda sudah dapat mengakses file Bootstrapnya dari file scss yang akan kita buat di step selanjutnya.

Membuat File SCSS

Karena Bootstrap menggunakan file scss, kita juga akan menggunakan file itu. Silahkan buat folder di dalam folder root dengan nama src. Kemudian, didalam src buat folder lagi dengan nama sass. Disini kita akan menaruh semua file yang akan digunakan untuk mengubah Bootstrap serta menambahkan style kita sendiri.

Didalam folder sass silahkan membuat file _custom.scss. Ini adalah file yang akan kita gunakan untuk memodifikasi file bootstrap yang sudah ada. Underscore (_) itu menyatakan bahwa file tersebut adalah partial, yang nanti kita akan import di file utama.

Kemudian, didalam folder sass lagi silahkan membuat file main.scss. Ini adalah file yang akan import semuah file yang dibutuhkan dan yang akan dikompilasi menjadi file css.

Didalam file _custom.scss, import file Bootstrap yang sudah di unduh dari npm tadi:

// src/sass/_custom.scss
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

Di dalam file main.scss, import file _custom.scss:

@import "./custom";

Karena kita menggunakan syntax dengan underscore, kita hanya perlu menaruh nama file tanpa extensi underscorenya.

Instalasi SASS

Semua import telah dilakukan, tapi browser tidak akan bisa style website kita dengan scss, jadi kita harus kompilasi file scss kita menjadi css yang bisa dibaca browser. Kita akan menggunakan paket npm lain untuk mengkompilasinya, yaitu sass. Paket ini akan memperbolehkan kita untuk mengubah file scss ke css:

npm i sass

Membuat Script NPM

Setelah di-instal, silahkan membuat script dalam package.json. Dalam entry "script", tambahkan ini:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "sass src/sass/main.scss dist/css/main.css"
  },

Script ini artinya kita mau mengkompilasi file yang ada di src/sass/main.scss menjadi file css dalam folder dist/css dengan nama main.css.

Silahkan dalam terminal ketik npm run sass. Setelah beberapa saat akan melihat folder baru dengan nama dist berisi main.css. Anda bisa melihat sudah banyak style yang didapat dari Bootstrap.

Tes Bootstrap

Untuk menguji coba apakah bootstrap sudah diinstal, silahkan buat index.html dalam folder utama anda. Dalam file tersebut masukkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Masukkan file css  -->
    <link rel="stylesheet" href="dist/css/main.css">
    <title>Bootstrap</title>
</head>
 <!-- Masukkan kelas-kelas bootstrap css  -->
<body class="bg-secondary">
    <div class="bg-primary text-center p-3">
        <h1 class="text-light">Test doang bro</h1>
    </div>
</body>
</html>

Silahkan klik file ini di file explorer pilihan anda untuk melihat hasilnya.

Jika hasilnya seperti diatas, berarti Bootstrap berhasil dikompilasi. Karena kita tidak membuat style sama sekali (hanya menaruh kelas ke dalam elemen), tetapi kita mendapatkan background biru dan memiliki font yang tidak default.

Kita berhasil mengunduh Bootstrap kedalam folder lokal kita, tetapi style-nya masih akan sama dengan setiap orang yang mengunduh Bootstrap (warna primary biru, dll).

Mengubah/Memodifikasi Bootstrap

Coba kita ubah warna utamanya menjadi warna yang lebih unik. Bootstrap menyimpan banyak variabel yang dapat kita modifikasi. Salah satunya yaitu $primary. Variabel ini menyimpan warna utama yang digunakan berbagai kelas, contohnya bg-primary yang megubah background-color menjadi warna yang ada dalam variabel tersebut.

Dalam file _custom.scss diatas import yang kita masukkan silahkan ketik:

$primary: #ba1422;

Jika anda refresh index.html anda tidak akan melihat perubahan. Hal ini karena kita belum kompilasi file scss menjadi file css (yang kita gunakkan dalam tag link). Jadi silahkan ketik npm run sass lagi dalam terminal.

Kemudian refersh index.html:

Bisa dilihat bahwa kita berhasil memodifikasi secara langsung variabel bootstrap sehingga kelas dari Bootstrap sendiri (bg-primary) menggunakan warna yang kita masukkan sendiri.

Tapi mengetik npm run sass setiap kali kita mengubah file scss kita tidak efisien dan melelahkan. Jadi kita kan membuat script lagi seperti tadi, tapi kali ini script kita akan memantau (watch) perubahan file scss kita dan mengkompilasi secara otomatis setiap kali anda save file tersebut.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass": "sass src/sass/main.scss dist/css/main.css",
    "sass:watch": "sass --watch src/sass/main.scss dist/css/main.css"
  },

Seperti yang anda bisa lihat, scriptnya hampir sama. Perbedaannya adalah nama scriptnya dan flag --watch yang ditambahkan.

Silahkan jalankan scriptnya di terminal:

npm run sass:watch

Kemudian silahkan tes apakah sudah benar dengan cara mengubah lagi variabel $primary tadi menjadi warna lain dan save. Setelah beberapa saat file scss akan telah dikompilasi lagi menjadi css. Refresh index.html lagi dan lihat perubahannya.

Konklusi

Jadi, langkah-langkah untuk memulai memodifikasi Bootstrap adalah:

1. Inisialisasi npm dengan npm init -y (setelah download node) .
2. Instal Bootstrap dengan npm i bootstrap.
3. Membuat file scss utama: src/sass/main.scss.
4. Membuat file untuk memodifikasi Bootstrap: src/sass/_custom.scss.
5. Import Bootstrap dalam _custom.scss: @import "../../node_modules/bootstrap/scss/bootstrap.scss";
6. Import _custom.scss di dalam main.scss: @import './custom;.
7. Instal sass: npm i sass.
8. Buat script untuk kompilasi file scss: "sass": "sass src/sass/main.scss dist/css/main.css".
9. Luncurkan script: npm run sass dalam terminal.
10. Masukkan link ke css ke dalam index.html: <link rel="stylesheet" href="dist/css/main.css">.