📚 SERI BELAJAR BOOTSTRAP · ARTIKEL 3 DARI 8

Tampil Kece dengan
Typography & Color
Bootstrap 4

Panduan lengkap class teks dan warna Bootstrap 4 — dari font size sampai text color, semua yang kamu butuhkan untuk bikin tampilan web makin hidup dan profesional.

#TypographyBootstrap4 #ClassTextBootstrap4 #WarnaBootstrap4 #BelajarBootstrap

⏱️

Estimasi Baca

7–9 Menit

🎯

Level

Dasar

📅

Tahun

2026

Pernah nggak kamu bikin website, terus hasilnya kayak... formulir pajak? Tulisan semua sama besar, semua hitam, nggak ada yang menonjol. Padahal kontennya bagus banget. Nah, itulah masalah yang diselesaikan oleh typography Bootstrap 4 — sistem class teks dan warna yang bikin tampilan webmu langsung naik level tanpa perlu jago desain. Di artikel ketiga dari seri Bootstrap from Zero to Zorro ini, kita bakal bedah habis semua class text dan color di Bootstrap 4, lengkap dengan contoh yang bisa langsung kamu cobain. Siap? Mari gas! 🚀

📖 Definisi Konsep

Apa itu Typography & Color Utility di Bootstrap 4?

Typography Bootstrap 4 adalah sekumpulan class CSS siap pakai yang mengatur tampilan teks — mulai dari ukuran, ketebalan, perataan, transformasi, sampai warna teks dan background. Dengan utility class ini, kamu cukup tambahkan satu class ke elemen HTML, dan tampilannya langsung berubah sesuai keinginan — tanpa nulis satu baris CSS pun.

🔤 Menguasai Typography Bootstrap 4: Class Teks yang Wajib Kamu Tahu

Bayangkan typography itu seperti kostum pemain teater. Teks judul pakai kostum mewah (besar, tebal), teks keterangan pakai kostum sederhana (kecil, tipis). Bootstrap 4 sudah sediain semua "kostumnya" — tinggal kamu pakein ke elemen HTML yang tepat.

📌 Step 1 — Heading & Display Class

Bootstrap 4 punya tag H1–H6 seperti biasa. Tapi ada yang spesial: class .display-1 sampai .display-4 untuk judul yang jauh lebih besar dan impactful — cocok untuk hero section.

Gunakan class .lead untuk paragraf pembuka yang sedikit lebih besar dari teks biasa — memberi sinyal ke pembaca bahwa "ini intro penting!"

Ada juga elemen <mark>, <del>, <ins>, dan <abbr> yang sudah di-style otomatis oleh Bootstrap.

HTML — Typography Bootstrap 4

<!-- Display Class -->
<h1 class="display-1">Judul Super Besar</h1>
<h2 class="display-4">Judul Besar</h2>

<!-- Lead paragraph -->
<p class="lead">Ini adalah paragraf intro yang sedikit lebih menonjol.</p>

<!-- Inline styling bawaan Bootstrap -->
<p>Teks <mark>highlight</mark>, 
   <del>teks coret</del>, 
   <ins>teks garis bawah</ins></p>

<!-- Small text -->
<small class="text-muted">Ini catatan kaki kecil dan redup</small>

💡 Tips Pro

Jangan gunakan .display-1 di semua tempat! Display class idealnya hanya untuk 1 elemen hero per halaman. Kalau semua teks besar, jadinya malah nggak ada yang menonjol — kayak semua orang teriak di ruangan yang sama. 😅

📌 Step 2 — Text Alignment, Weight & Transform

Perataan teks: .text-left, .text-center, .text-right, dan .text-justify. Bisa juga responsive: .text-md-center (center di layar medium ke atas).

Ketebalan font: .font-weight-bold, .font-weight-normal, .font-weight-light, dan .font-italic.

Transformasi teks: .text-uppercase (HURUF BESAR SEMUA), .text-lowercase (huruf kecil semua), dan .text-capitalize (Huruf Awal Kapital).

HTML — Text Alignment, Weight & Transform

<!-- Perataan -->
<p class="text-center">Teks di tengah</p>
<p class="text-right">Teks di kanan</p>
<p class="text-md-center text-left">Kiri di mobile, tengah di desktop</p>

<!-- Ketebalan & gaya -->
<p class="font-weight-bold">Teks Tebal</p>
<p class="font-italic">Teks Miring</p>

<!-- Transformasi -->
<p class="text-uppercase">ini jadi huruf besar</p>
<p class="text-capitalize">ini jadi kapital tiap kata</p>

🎨 Sistem Warna Bootstrap 4: Text Color & Background Color

Kalau typography adalah kostumnya, maka warna Bootstrap 4 adalah make-up dan aksesorinya. Bootstrap punya palet warna kontekstual yang namanya sudah bermakna — jadi kamu nggak perlu hafal kode hex, cukup ingat maknanya.

Class Text Color	Class BG Color	Makna / Konteks
`.text-primary`	`.bg-primary`	Utama / CTA
`.text-success`	`.bg-success`	Berhasil / Positif
`.text-danger`	`.bg-danger`	Error / Bahaya
`.text-warning`	`.bg-warning`	Peringatan
`.text-info`	`.bg-info`	Informasi
`.text-muted`	`.bg-secondary`	Sekunder / Redup
`.text-white`	`.bg-dark`	Putih / Gelap
`.text-body`	`.bg-light`	Default / Terang

🔥 Fakta Menarik

Bootstrap 4 mengikuti prinsip "semantic colors" — artinya nama warnanya punya makna universal. .text-danger selalu merah karena bahaya itu merah di seluruh dunia. Ini bukan kebetulan, tapi keputusan desain yang membantu konsistensi UX secara global!

HTML — Text Color & Background Color

<!-- Text Color -->
<p class="text-primary">Teks biru primer</p>
<p class="text-success">Teks hijau sukses</p>
<p class="text-danger">Teks merah bahaya</p>
<p class="text-muted">Teks abu redup</p>

<!-- Background Color -->
<div class="bg-warning text-dark p-3">Background kuning peringatan</div>
<div class="bg-dark text-white p-3">Background gelap, teks putih</div>
<div class="bg-gradient-primary text-white p-3">Dengan gradient!</div>

⚠️ Perhatian

Saat kamu pakai .bg-warning atau .bg-light, pastikan teks yang di dalamnya pakai .text-dark agar kontrasnya cukup dan tetap terbaca. Ini penting untuk aksesibilitas (a11y)!

⚡ Kombinasi Class Typography Bootstrap 4 untuk Tampilan Profesional

Sekarang saatnya menggabungkan class typography dan color secara bersamaan. Satu elemen HTML bisa punya banyak class sekaligus — ini kekuatan sebenarnya dari Bootstrap! Ingat analoginya: kostum + make-up + aksesori dipakai bareng — hasilnya baru keren.

⚡ Insight Penting

Di Bootstrap 4, kamu bisa gabungkan class tanpa batas selama tidak saling bertentangan. Misalnya: class="display-4 font-weight-bold text-center text-primary" — semua class itu valid dan akan diterapkan bersamaan!

🔍 Analisis: Kapan Pakai Class Mana?

📢

Hero / Banner

Gunakan .display-1 + .font-weight-bold + .text-center

📋

Notifikasi / Alert

Pakai .text-danger + .font-weight-bold untuk pesan error

🏷️

Label / Badge

Pakai .text-uppercase + .font-weight-bold untuk label kategori

📝

Catatan / Keterangan

Pakai .text-muted + <small> untuk teks kecil redup

HTML — Kombinasi Class Lengkap

<!-- Hero Headline -->
<h1 class="display-3 font-weight-bold text-center text-primary">
  Selamat Datang!
</h1>

<!-- Paragraf intro -->
<p class="lead text-center text-muted">
  Belajar Bootstrap itu mudah dan menyenangkan.
</p>

<!-- Kategori / label -->
<span class="text-uppercase font-weight-bold text-success" 
      style="font-size: 12px; letter-spacing: 1px;">
  ✅ Tutorial
</span>

<!-- Peringatan error -->
<p class="text-danger font-weight-bold">
  ⚠️ Password minimal 8 karakter!
</p>

<!-- Card header section -->
<div class="bg-dark text-white p-4 rounded">
  <h5 class="font-weight-bold mb-1">Judul Card</h5>
  <small class="text-muted">Diterbitkan 19 April 2026</small>
</div>

💡 Tips Bonus: Truncate Teks Panjang

Punya teks judul yang terlalu panjang? Tambahkan class .text-truncate dan pastikan elemen parent-nya punya lebar tetap. Bootstrap otomatis memotong teks dan menambahkan "..." di akhir. Rapi banget untuk card atau list item!

📋 Cheat Sheet: Semua Class Typography Bootstrap 4 dalam Satu Tempat

Ini dia referensi cepat yang bisa kamu simpan atau bookmark. Semua class teks dan warna Bootstrap 4 yang paling sering dipakai, dirangkum buat kamu.

Kategori	Class Bootstrap 4	Efek
Display	`.display-1 → .display-4`	Judul besar hero section
Lead	`.lead`	Paragraf intro lebih besar
Weight	`.font-weight-bold / light / normal / bolder`	Ketebalan font
Style	`.font-italic`	Teks miring
Alignment	`.text-left / center / right / justify`	Perataan teks
Transform	`.text-uppercase / lowercase / capitalize`	Transformasi huruf
Wrap	`.text-nowrap / text-truncate / text-break`	Kontrol baris teks
Reset	`.text-reset / text-decoration-none`	Reset warna/dekorasi link
Color	`.text-primary / success / danger / warning / info / muted / white / dark / body`	Warna teks
BG	`.bg-primary / secondary / success / danger / warning / info / light / dark / white / transparent`	Warna latar

🎓

Bagian dari Seri

Bootstrap from Zero to Zorro

Artikel ini adalah bagian ke-3 dari 8 artikel seri Bootstrap from Zero to Zorro. Sebelum melanjutkan, pastikan kamu sudah tuntas membaca materi prasyarat berikut ini 👇

📄

Seri HTML5

HTML5 from Zero to Zorro →

🎨

Seri CSS

CSS from Zero to Zorro →

⚙️

Seri JavaScript

JavaScript from Zero to Zorro →

📚 Lihat Semua 8 Artikel Seri Bootstrap →

🏁 Kesimpulan

Kamu Sudah Menguasai Typography & Color Bootstrap 4! 🎉

Luar biasa! Di artikel ini kamu sudah mempelajari fondasi penting dari typography Bootstrap 4 — mulai dari display class, heading, lead, perataan teks, transformasi, ketebalan font, hingga sistem warna kontekstual yang lengkap. Semua ini adalah senjata utama kamu untuk membuat tampilan web yang profesional, konsisten, dan eye-catching hanya dengan menambahkan class ke HTML.

Poin penting yang harus kamu ingat: Bootstrap 4 adalah sistem utility yang dirancang untuk dipakai secara komposisi — gabungkan beberapa class sekaligus, dan kamu bisa mencapai tampilan apapun yang kamu bayangkan. Sekarang? Buka code editor kamu dan praktikkan semua contoh di atas!

💬 Punya pertanyaan? Atau sudah coba praktik dan hasilnya keren?

Tinggalkan komentar di bawah, share artikel ini ke teman yang lagi belajar web dev, dan subscribe biar kamu nggak ketinggalan Artikel 4 tentang komponen Bootstrap 4! 🚀

💬 Tinggalkan Komentar 📚 Semua Artikel Bootstrap

🏷️ Tags: #TypographyBootstrap4 #ClassTextBootstrap4 #WarnaBootstrap4 #TextColorBootstrap #Bootstrap #FrontEnd #BelajarBootstrap

🧭 Navigasi Artikel — Seri Bootstrap from Zero to Zorro

← Artikel Sebelumnya · Artikel 2

Rahasia Grid System Bootstrap 4: Bikin Layout Web Rapi Tanpa Pusing!

Artikel Selanjutnya · Artikel 4 →

Komponen Bootstrap 4 Wajib Tahu: Navbar, Card, dan Button

🏠 Halaman Utama Seri

Bootstrap from Zero to Zorro — Semua 8 Artikel

Lihat seluruh roadmap dan navigasi seri lengkap

📚