Tutorial Belajar Bootstrap 4 Part 8 – Merubah warna text pada bootstrap

Selamat datang, dalam tutorial kali ini kita akan membahas mengenai merubah warna text pada bootstrap, buat teman – teman yang sulit bermain warna pada text,,, nah kali ini kita akan membahas beberapa class yang ada dalam bootstrap untuk mengganti warna pada text dan background.

Mengatur text color dengan boostrap

Beberapa class bootstrap yang dapat digunakan untuk mengatur warna text antara lain :

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark and
  • .text-light

Untuk contoh penggunaannya adalah sebagai berikut :

Semisal kita simpan dengan nama text_color.html, lalu kita buka di browser :

Keterangan :

  • text yang ditampilkan warnanya akan menyesuaikan dengan class yang digunakan, sehingga anda dapat menyesuaikan dengan class yang digunakan.

 

 

 

 

Mengatur Background color dengan bootstrap

Pada bootstrap juga terdapat beberapa class yang digunakan untk mengatur warna bacgkround, beberapa class tersebut antara lain :

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

untuk contoh silahkan perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama background_color.html, lalu kita buka di browser maka hasilnya sebagai berikut :

Keterangan :

  • background dari text akan menyesuaikan class bootrap yang digunakan.
  • dalam contoh  diatas kita menambahkan class text-white untuk merubah warna text menjadi putih, anda juga dapat menggunakan class text color lainnya seperti yang telah dijelaskan dibagian sebelumnya.

 

Baik sekian dulu teman – teman pembahasan mengenai cara merubah warna text dan background pada bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap selanjutnya.

 

One thought on “Tutorial Belajar Bootstrap 4 Part 8 – Merubah warna text pada bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *