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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Penggunaan class bootstrap untuk text color</h2> <hr/> <p class="text-muted">Contoh text dengan Class .text-muted</p> <p class="text-primary">Contoh text dengan Class .text-primary</p> <p class="text-success">Contoh text dengan Class .text-success</p> <p class="text-info">Contoh text dengan Class .text-info</p> <p class="text-warning">Contoh text dengan Class .text-warning</p> <p class="text-danger">Contoh text dengan Class .text-danger</p> <p class="text-secondary">Contoh text dengan Class .text-secondary</p> <p class="text-dark">Contoh text dengan Class .text-dark</p> <p class="text-light">Contoh text dengan Class .text-light</p> </div> </body> </html> |
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Penggunaan Class Bootstrap untuk merubah warna background</h2> <p class="bg-primary text-white">Contoh menggunakan class bg-primary</p> <p class="bg-success text-white">Contoh menggunakan class bg-success</p> <p class="bg-info text-white">Contoh menggunakan class bg-info</p> <p class="bg-warning text-white">Contoh menggunakan class bg-warning</p> <p class="bg-danger text-white">Contoh menggunakan class bg-danger</p> <p class="bg-secondary text-white">Contoh menggunakan class bg-secondary</p> <p class="bg-dark text-white">Contoh menggunakan class bg-dark</p> <p class="bg-light text-dark">Contoh menggunakan class bg-light</p> </div> </body> </html> |
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.
Artikel ini sangat membantu.