Nama-Nama class Bootstrap Untuk Mengganti Warna Tulisan dengan Cepat

Ketika menggunakan framework tentu ada kelebihan tertentu yang disediakan oleh framework itu sendiri, seperti pada Bootstrap, kamu dapat memberikan warna teks selain warna default yaitu hitam. Bootstrap memiliki contextual class yang mudah digunakan hanya menggunakan class.

Ketika menggunakan HTML saja tentu harus mengaturnya di style / CSS bersangkutan hanya untuk memberikan warna pada tulisan, ini lebih panjang ketimbang menggunakan class dari Bootstrap. Jika belum menggunakan Bootstrap, silahkan ikuti tutorial bagaimana cara menggunakan Bootstrap.

Seperti yang kita ketahui, Bootstrap menyediakan warna yang mudah digunakan menggunakan class diantaranya warna biru, biru muda, merah, kuning / oranye, dan hijau. Warna-warna ini menandakan dari beberapa kondisi seperti penting, sukses, info, gagal, warning, dsb.

Warna-warna tersebut tidak hanya untuk tulisan saja melainkan untuk elemen lainnya seperti tombol, itu merupakan warna yang disediakan oleh Bootstrap dibuatkan ke dalam sebuah class agar mudah digunakan oleh siapapun. Adapun class yang dapat digunakan untuk memberi warna pada tulisan adalah:

  • class=”text-muted”, warna gelap / buram
  • class=”text-danger”, warna merah
  • class=”text-primary”, warna biru
  • class=”text-warning”, warna kuning / orange (browser)
  • class=”text-success”, warna hijau
  • class=”text-info”, warna biru muda

Lalu, Bagaimana Cara Menggunakannya ?

Berikan classclass di atas sesuai warna yang ingin digunakan pada pembungkus tulisan yang ingin diberikan warna, misalnya seperti ini:

<p>Baris ini menampilkan tulisan dalam tag p tanpa class, menampilkan warna default (hitam):</p>
<p class="text-muted">Tulisan ini diberi class text-muted</p>
<p class="text-danger">Tulisan ini diberi class text-danger</p>
<p class="text-primary">Tulisan ini diberi class text-primary</p>
<p class="text-warning">Tulisan ini diberi class text-warning</p>
<p class="text-success">Tulisan ini diberi class text-success</p>
<p class="text-info">Tulisan ini diberi class text-info</p>

Hasilnya akan terlihat seperti ini:

gambar 1 - class warna tulisan bootstrap

Itulah nama class untuk tulisan pada situs yang dibangun menggunakan Bootstrap untuk memberikan warna pada tulisan dengan cepat, selamat mencoba !

SUBSCRIBE
Subsribe sekarang dan dapatkan UPDATE terbaru melalui Email.
Berhenti Subscribe Kapanpun!
POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi