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 boostrapBeberapa class bootstrap yang dapat digunakan untuk mengatur warna text antara lain :
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 :
Mengatur Background color dengan bootstrapPada bootstrap juga terdapat beberapa class yang digunakan untk mengatur warna bacgkround, beberapa class tersebut antara lain :
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 :
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. |
Cara menggunakan color bootstrap
Pos Terkait
Copyright © 2024 ketajaman Inc.
