Nama-Nama class Bootstrap Untuk Mengganti Warna Tulisan dengan Cepat

0

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.

ads by posciety

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 !

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya