Belajar Bootstrap 5

Cara Mengatur Warna Menggunakan Color Utilities

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Kita langsung mulai coding, menggunakan source code dari video sebelumnya. Pertama kita tambahkan dahulu tag div setelah tag penutup nav. Kita berikan konten misalkan Background Color. Dan ini adalah tampilan awal dari source code kita saat ini.

Pertama kita coba untuk menambahkan warna latar belakang terlebih dahulu ya. Kita bisa lihat dokumentasi Bootstrap, di bagian Utility, kemudian kita pilih Background. Disini Bootstrap sudah menyediakan beberapa kelas untuk mengatur warna latar belakang, seperti bg-primary untuk warna biru tua, bg-secondary warna abu-abu, bg-success warna hijau, bg-danger warna merah, bg-warning warna kuning, bg-info warna biru muda, dan berikutnya ada beberapa kombinasi warna hitam dan putih.

Untuk menggunakan warna-warna disini, kita cukup menambahkan nama kelasnya saja ke kode HTML kita. Sebagai contoh, misalkan kita hendak menggunakan warna bg-primary, maka kita tinggal ke kode HTML. Misalkan pada tag div kita yang barusan, kita tambahkan kelas bg-primary. Pada saat kita refresh, maka kita sudah mendapatkan warna biru tua pada konten Background Color.

Untuk menggunakan warna lainnya kita tinggal mengikuti saja nama kelasnya. Misalkan untuk warna hijau kita menggunakan nama kelas bg-success. Atau untuk warna merah, kita gunakan bg-danger.

Selanjutnya kita tambahkan lagi tag div baru, dan kita isikan dengan konten Text Color. Kali ini kita akan ubah warna tulisannya. Kita bisa mengubah warna tulisan dengan menggunakan Color Utility. Jadi kalau kita buka kembali dokumentasi Bootstrap, kita lihat ke bagian Utilities, dan kemudian kita pilih Colors. Nah, kita akan mendapatkan warna-warna yang kurang lebih sama dengan warna latar belakang tadi ya. Seperti primary dengan warna biru tua, secondary dengan warna abu-abu, success warna hijau, dan seterusnya.

Perhatikan disini bahwa nama depan kelasnya berubah dari tadinya bg menjadi text. Jadi ini perlu kita ingat ya. Untuk mengubah warna latar belakang, kita menggunakan kelas bg. Sedangkan untuk mengubah warna teks, kita menggunakan kelas text. Sebagai contoh, kita tambahkan kelas text-primary. Maka warna teks kita berubah menjadi biru tua. Kalau misalkan kita ganti kelasnya menjadi text-success, maka warna teks berubah menjadi hijau tua. Kita kembalikan dahulu ke biru tua. Dan warna latar belakang dari div background color juga kita kembalikan ke biru tua.

Kita juga bisa melakukan kombinasi antara warna latar belakang dan warna teks pada tag yang sama. Sebagai contoh, apabila saya ingin teks yang biru tua ini menggunakan warna latar belakang kuning, maka saya tinggal menambahkan kelas bg-warning. Dan sekarang konten Text Color menggunakan warna kombinasi kuning dan biru.

Pertanyaan berikutnya. Apakah kita bisa mengganti warna tulisan pada navigasi? Kita coba kembali ke tag nav. Misalkan kita ganti kelas navbar-light menjadi text-success. Kita lihat hasilnya di browser. Ternyata warna teks tidak berhasil berubah ya. Mengapa? Untuk pengaturan warna teks pada navigasi tidak gampang ya, karena navigasi ini adalah satu komponen yang memiliki anak kelas yang saling terhubung. Jadi kelas untuk pengaturan warna disini harus bisa compatible dengan kelas-kelas pada tag anaknya, seperti navbar-toggler, nav-item, dan nav-link.

Untuk informasi lebih lanjut mengenai warna teks pada komponen Navigasi, kita bisa kembali ke halaman dokumentasi pada Bootstrap. Kita pilih komponen Navbar. Kemudian kita pilih bagian Color Schemes.

Disini dijelaskan bahwa untuk warna latar belakang dari Navbar, kita bisa menggunakan background-color utilites, seperti yang sudah kita praktekkan barusan. Jadi kalau kita ingin menggunakan warna latar belakang biru tua, kita tinggal tambahkan kelas bg-primary pada tag nav.

Namun untuk warna teks, kita hanya bisa memilih diantara kelas navbar-light atau kelas navbar-dark saja. Sebagai contoh, kita kembalikan ke navbar-light, maka kita mendapatkan tulisan dengan warna gelap. Dan kalau kita ganti ke navbar-dark, maka kita mendapatkan teks dengan warna terang.

Kelas navbar-light akan cocok untuk digunakan pada saat kita menggunakan warna latar belakang terang. Sedangkan kelas navbar-dark lebih cocok digunakan pada saat kita menggunakan warna latar belakang gelap. Kita kembalikan kelas kita ke navbar-light.

Nah, cara menggunakan warna seperti ini sangat gampang. Namun ada beberapa kekurangan ya. Yang pertama, warna yang bisa kita pilih terbatas hanya warna-warna yang disediakan oleh Bootstrap. Dan kekurangan keduanya, apabila semua situs yang dibuat menggunakan Bootstrap hanya menggunakan warna-warna ini, maka situs yang dihasilkan kurang lebih warnanya sama. Designnya ya begitu-begitu saja. Pengunjung situs kita akan cepat bosan.

Oleh karena itu, kita perlu cara untuk melakukan kostumisasi warna, sehingga kita bisa menggunakan warna pilihan kita sendiri. Ada 3 cara yang bisa kita gunakan untuk mengubah warna Bootstrap, yang pertama kita bisa mengubahnya langsung dari source code Bootstrap. Yang kedua kita bisa membuat file CSS tambahan yang akan melakukan override terhadap kelas Bootstrap. Cara ketiga adalah kita membuat kelas sendiri untuk mengatur warna kita. Akan kita bahas dan praktekkan satu per satu.

Pertama kita akan mempraktekan cara mengubah langsung dari source code Bootstrap. Kita bisa mengunduh Bootstrap seperti yang kita pelajari pada video sebelumnya. Lalu kita unzip source code Bootstrap di folder source code kita.

Kemudian kode link yang menuju ke CDN Bootstrap kita komentari untuk sementara. Lalu kita tambahkan link baru, dan kita arahkan ke bootstrap.css yang barusan kita unduh. Jadi nilai href-nya kita ganti menjadi bootstrap-5.1.0-dist/css/bootstrap.css. Kita coba refresh browser. Kalau tidak ada perubahan berarti kita sudah berhasil berpindah dari Bootstrap CDN menjadi Boostrap lokal.

Kita buka kode bootstrap.css. Kita cari dengan kata kunci primary. Disini kita bisa mendapatkan kode hexadesimal dari warna biru tua yang digunakan oleh primary. Kita bisa mengganti warnanya dengan cara mengganti nilai ini dan nilai rgb-nya. Sebagai contoh, kita ubah menjadi warna merah. Kita ganti nilai ini menjadi kode hexadesimal merah, yaitu #ff0000. Kemudian di bagian bawahnya kita ganti –bs-primary-rgb menjadi 255, 0, 0.

Kita simpan dan refresh browser. Sekarang semua warna primary sudah berubah menjadi warna merah, baik warna latar belakang maupun warna teksnya. Jadi dengan melakukan cara ini, kita bisa sekaligus merubah warna latar belakang dan warna teks dari primary.

Sebenarnya masih ada cara lain untuk melakukan hal ini. Kita bisa mengunduh Sass Source Files dari Bootstrap, lalu kita ubah nilai variable warnanya, dan kita compile menggunakan Sass. Namun pada playlist ini, kita masih belum bisa membahas mengenai hal ini karena prosesnya lebih rumit dan memerlukan instalasi Sass.

Sekarang kita hapus dahulu kode link yang menuju ke Bootstrap lokal, dan kita kembali ke Bootstrap CDN. Kita refresh browser, dan warna primary sudah kembali normal.

Selanjutnya kita akan mencoba cara kedua, yaitu dengan melakukan overide ke kelas yang telah disediakan oleh Bootstrap. Untuk itu kita perlu menambahkan link ke CSS baru buatan kita sendiri. Pada source code ini saya sudah menyediakan link ke style.css yang isinya masih kosong ya.

Kita tinggal tambahkan nama kelas yang hendak kita override. Sebagai contoh, kita coba ubah warna latar belakang primary menjadi warna merah lagi. Kita tambahkan kelas .bg-primary dan kemudian kita berikan properti background-color dengan nilai red. Kita simpan dan refresh browser.

Ternyata tidak ada perubahan ya. Kita buka developer tools dan kita arahkan ke elemen div Background Color saja ya, agar lebih gampang. Kita lihat pada bagian Styles, ada kelas bg-primary dengan warna merah di bagian paling atas, namun properti ini dicoret dan yang digunakan malah kelas bg-primary yang berada di bawahnya. Nah, kalau kita perhatikan lagi, ternyata pada properti background-color di bagian bawah memiliki kata kunci !important ya. Karena ada kata kunci ini, maka warna primary pada bootstrap bisa mengalahkan warna merah yang kita tulis.

Untuk melawan warna bawaan Bootstrap, maka kita juga bisa menambahkan kata kunci !important di kelas bg-primary yang kita tulis. Kita simpan dan refresh browser. Dan sekarang semua warna latar belakang primary telah berubah menjadi warna merah. Kalau kita lihat pada developer tools, sekarang yang digunakan adalah warna background-color red, karena berada di bagian paling atas dan memiliki kata kunci important. Sedangkan warna background-color bawaan Bootstrap sudah dicoret.

Yang perlu diperhatikan disini adalah penulisan tag link untuk menuju ke CSS buatan kita harus berada setelah tag link menuju Bootstrap. Apabila kita balik posisi link CSS kita menjadi di atas, maka warna yang digunakan adalah warna primary bawaan Bootstrap. Bisa kita lihat pada Developer Tools, bahwa background-color Bootstrap menjadi berada di atas. Sedangkan background-color kita yang berwarna merah berada dibawahnya dan dicoret.

Kita kembalikan posisi link CSS kita ke bawah Bootstrap. Dan perhatikan disini bahwa perubahan yang kita tulis pada kelas .bg-primary tidak berdampak pada kelas text-primary. Jadi tulisan Text-Color tetap berwarna biru. Untuk mengubahnya kita mesti menambahkan lagi kelas .text-primary, kita tambahkan properti color dengan nilai red !important. Sekarang warna text-primary berubah menjadi warna merah.

Kita lanjutkan ke cara ketiga untuk melakukan kostumisasi warna pada Bootstrap, yaitu dengan cara menambahkan kelas sendiri. Sebagai contoh, kita buat satu kelas khusus untuk memberi warna latar belakang pada navigasi, dan kita beri nama kelas yang belum pernah digunakan pada bootstrap, misalkan bg-navigasi. Kita buka kode css kita. Kita hapus semua kelas dari cara sebelumnya. Kita tambahkan selektor baru .bg-navigasi. Kita isikan dengan properti background-color: red. Kita simpan dan refresh browser. Semua warna latar belakang kembali ke warna primary bawaan Bootstrap ya. Masih belum ada yang menggunakan warna latar belakang merah, karena kita belum pernah menaruh kelas bg-navigasi ke salah satu tag di kode HTML kita.

Kita buka kembali kode HTML, dan kita ubah tag nav yang tadinya menggunakan kelas bg-primary menjadi bg-navigasi. Dan sekarang navigasi kita sudah menggunakan warna latar belakang merah. Perhatikan bahwa div background color tetap menggunakan warna biru tua bawaan Bootstrap, karena kelasnya masih menggunakan bg-primary.

Pada playlist ini, kita akan menggunakan cara ketiga untuk melakukan kostumisasi warna pada Bootstrap, karena kita mengerjakan proyek ini sambil belajar mengenai Bootstrap. Jadi kita harus menggunakan Bootstrap yang versi original tanpa modifikasi dari kita. Dalam prakteknya, teman-teman bebas boleh memilih salah satu dari ketiga cara yang kita bahas barusan. Masing-masing cara memiliki kelebihan dan kekurangan tersendiri.

Untuk warna latar belakang pada navigasi proyek, saya menggunakan warna biru khusus yang saya pilih menggunakan situs ColorHunt.co. Jadi kita buka kembali kode CSS kita, dan kita ubah kata kunci red menjadi #7DEDFF. Dan sekarang warna navigasi sudah menggunakan warna biru yang sesuai dengan situs Startup yang hendak kita buat.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.